اگر از خوانندگان بخش طراحی وب ایران هکس باشید، در جریان هستید که در دو قسمت قبل آموزش ساخت متن برجسته و متحرک سازی تصویر پس زمینه منتشر شد. در این قسمت از مجموعه ۵ تکنیک کاربردی CSS و jQuery، که قسمت سوم آن می باشد قصد دارم تا نحوه کدنویسی یک منوی آبشاری را به شما آموزش دهم.

منوهای آبشاری یا Drop & Down، منوهایی هستند که با قرار گرفتن ماوس روی آنها به صورت کشویی باز می شوند و لینک‌های زیرمجموعه از این طریق قابل دیدن خواهند بود. منویی که در این مقاله قصد آموزش آن را دارم یک منو با زیرمجموعه چند ستونه می باشد که امکان قرار دادن زیرمجموعه‌های گروهی در آن امکان پذیر است…

مراحل زیر را با دقت انجام دهید. توجه کنید که مسائل ابتدایی توضیح داده نشده اند.

1- ساخت تب‌ها

برای ساختن تب‌ها یا لینک‌های اصلی منو کد‌های زیر را می نویسیم.

<ul id="main-nav">
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 1</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 2</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 3</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 4</a>
</li>
<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 5</a>
</li>
</ul>

در کد بالا تعداد ۵ تب تعریف شده است که در حال حاضر زیر مجموعه ندارند. در ادامه نحوه افزودن زیر مجموعه به آنها را توضیح خواهم داد.

مرورگر IE6 از این منو پشتیبانی نمیکند . بنابراین اگر می خواهید که در این مرورگر هم قابل پشتیبانی باشد، باید از راه‌های دیگر استفاده کنید .

حالا کدهای CSS مربوط به تب‌های اصلی را در فایل CSS خود بنویسید.

#main-nav {
width: 800px;
height: 50px;
position: relative;
list-style: none;
padding: 0;
}
#main-nav .main-nav-item {
display: inline;
}
#main-nav .main-nav-tab {
float: left;
width: 140px;
height: 30px;
padding: 10px;
line-height: 30px;
text-align: center;
color: #FFF;
text-decoration: none;
font-size: 18px;
}

در کدهای بالا ابتدا طول و عرض منو تعریف شده اند و سپس برای اینکه قابلیت آبشاری داشته باشد کد position: relative; را به آن اضافه کرده ایم. از list-style: none استفاده کرده ایم تا لیست دارای بالت نباشد و همینطور از display: inline استفاده کرده ایم تا لیست ساخته شده به صورت خطی قرار بگیرد.

در آخر تمامی تب ها را Float:left کرده ایم.

2- ساخت Drop & Down

در این قسمت بخش بازشو و یا Drop & Down را برای یکی از تب‌ها می سازیم.

<li class="main-nav-item">
<a href="#" class="main-nav-tab">Tab 1</a>
<div class="main-nav-dd">
<div class="main-nav-dd-column">
Column content here
</div>
</div>
<div class="main-nav-dd">
<div class="main-nav-dd-column">
Column content here
</div>
</div>
<div class="main-nav-dd">
<div class="main-nav-dd-column">
Column content here
</div>
</div>
</li>

کدهای بالا بعد از کد

<a href="#">Tab 1</a>

قرار میگیرند که در واقع تعیین کننده تعداد ستون زیر مجموعه‌ها می باشند.

و حالا استایل مربوط به بخش بازشو را به فایل CSS اضافه می کنیم.

#main-nav .main-nav-dd {
position: absolute;
top: 50px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFF;
border-bottom: 4px solid #f60;
}
#main-nav .main-nav-dd-column {
width: 130px;
padding: 15px 20px 8px;
display: table-cell;
border-left: 1px solid #ddd;
*float: left;
*border-left: 0;
}
#main-nav .main-nav-dd-column:first-child {
border-left: 0;
}

در کدهای بالا ما برای تب اول ۳ ستون تعیین کرده‌ایم که در این ستون ها لینک‌های دلخواه را قرار میدهیم.

در کدهای CSS، قبل از بعضی سکتورها از کارکتر * استفاده کرده‌ایم که جزء هک‌های مرورگرهای IE6 و IE7 می باشد.

به همین صورت می توانید در میان هر یک از ستون ها لینکهای دلخواه خود را اضافه کنید.

3- مرتبط کردن CSS و jQuery

برای اینکه منوی ما حالت بازشو پیدا کند از ترکیب کدهای CSS و jQuery استفاده می کنیم.

$(function() {
var $mainNav = $('#main-nav');
$mainNav.children('.main-nav-item').hover(function(ev) {
// show the dropdown
$(this).addClass('main-nav-item-active');
}, function(ev) {
// hide the dropdown
$(this).removeClass('main-nav-item-active');
});
});

همانطور که میبینید کدهای سی‌اس‌اس را با کدهای جی‌کوئری بالا مرتبط کرده ایم.

حالا می توانیم کدهای مربوط به نمایش داده شدن و نشدن بخش بازشو را بنویسیم.

#main-nav .main-nav-dd {
display: none;
}
#main-nav .main-nav-item-active .main-nav-dd {
display: block;
}

و همینطور کدهای مربوط به حالت Active تب‌ها…

#main-nav .main-nav-item-active .main-nav-tab {
background-color: #FFF;
color: #f60;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

4- تعیین موقعیت بخش بازشو

این بخش موقعیت زیرمجموعه ها را در حالت قرار گیری ماوس روی آنها تعیین می کنیم تا درست در زیر تب‌ها قرار بگیرند.

$(function() {
var $mainNav = $('#main-nav');
$mainNav.children('.main-nav-item').hover(function(ev) {
var $this = $(this),
$dd = $this.find('.main-nav-dd');
// get the left position of this tab
var leftPos = $this.find('.main-nav-tab').position().left;
// position the dropdown
$dd.css('left', leftPos);
// show the dropdown
$this.addClass('main-nav-item-active');
}, function(ev) {
// hide the dropdown
$(this).removeClass('main-nav-item-active');
});
});

با استفاده از این کدها بخش بازشوی منو درست در زیر تب‌ها قرار میگیرند.

با برخی از کدهای جاوا اسکریپت دیگر موقعیت قرارگیری را بهتر میکنیم. کد زیر کاملتر می باشد؛ پس از آن استفاده می کنیم.

$(function() {
var $mainNav = $('#main-nav'),
navWidth = $mainNav.width();
$mainNav.children('.main-nav-item').hover(function(ev) {
var $this = $(this),
$dd = $this.find('.main-nav-dd');
// get the left position of this tab
var leftPos = $this.find('.main-nav-tab').position().left;
// get the width of the dropdown
var ddWidth = $dd.width(),
leftMax = navWidth - ddWidth;
// position the dropdown
$dd.css('left', Math.min(leftPos, leftMax) );
// show the dropdown
$this.addClass('main-nav-item-active');
}, function(ev) {
// hide the dropdown
$(this).removeClass('main-nav-item-active');
});
});

این بخش باید به دقت تنظیم شود تا محل قرارگیری زبانه‌ها به صورت درست قرار بگیرد. امیدوارم این قسمت نیز مورد استفاده شما عزیزان قرار بگیرد. فایل پایانی آموزش را می توانید از بخش زیر دریافت کنید. نظرات و پیشنهادات خود را برای ما ارسال کنید. با تشکر… موفق باشید.