نویسنده میهمان : حامد میرزایی : در این ارسال، نحوه ساخت یک منوی پائین افتادنی توسط jQuery را آموزش خواهم داد. از ویژگی های این منو سادگی منحصر بفرد آن به همراه افکت های بصری جی کوئری و قابلیت اعمال استایل های گوناگون جهت سفارشی سازی برای همه وبسایتهاست. شما میتوانید برای آیتم های منو و زیر منوها پس زمینه مورد نظر خود را تعیین کنید و یا در خاصیت hover آنها، افکت های مورد علاقه خود را قرار دهید. برای سفارشی سازی این منو کافیست تغییرات مورد نظر خود را بر روی استایل تگ های a در فایل CSS اعمال کنید.

1.کد HTML

از آنجا که روش استاندارد برای ساخت منوهای افقی در صفحات وب استفاده از لیست است، در این منو نیز از تگ <ul> برای ایجاد منو استفاده میکنیم. چنانچه آیتم های منو دارای زیر منو باشد، کافیست از یک لیست دیگر در داخل تگ <li> مربوط به آن منو استفاده کنیم. در کد HTML زیر، Parent نام منو و Item نام زیر منوها است. بنابراین شما میتوانید عناوین اصلی منو خود را در Level اول و زیر منوها را در Level دوم بنویسید. پس از اینکه آیتم های منو خود را در ساختار زیر ایجاد کردید، آن را در بخش کدهای HTML خود قرار دهید.

<ul id="nav">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#" class="selected">Parent 02</a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 03</a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>

<div class="clear"></div>

2.کد CSS

اکنون نوبت به کدهای CSS می رسد. ساختار CSS این منو بسیار ساده است. همانطور که در بخش HTML عنوان شد، ما دو لیست ساخته شده با داریم. یکی برای آیتم های اصلی منو و دیگری برای زیرمنوها. برای اینکه آیتم های اصلی در یک ردیف خطی به صورت افقی نشان داده شوند، دستور float:left را به تگ li اعمال میکنیم. زیرمنوها زمانی نشان داده می شوند که نشانگر ماوس روی آنها قرار گرفته و رویداد مربوطه ( mouseover ) صورت پذیرد. تمام اعمال مربوط به سفارشی سازی منو، در کدهای CSS باید انجام شود. برای تغییر در لینک های منو، باید استایل هایی را که بر روی تگ های a اعمال میشوند را در کدهای CSS تغییر دهید.

body {font-family:arial; font-size:11px;}
.clear {clear:both} 
/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
}   

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left; 
        display:block; 
        width:100px; 
        background:#ccc; 
        position:relative;
        z-index:500; 
        margin:0 1px;
    }

    /* this is the parent menu */
    #nav li a {
        display:block; 
        padding:8px 5px 0 5px; 
        font-weight:700;  
        height:23px; 
        text-decoration:none; 
        color:#fff; 
        text-align:center; 
        color:#333;
    }

    #nav li a:hover {
        color:#fff;
    }

    /* you can make a different style for default selected value */
    #nav a.selected {
        color:#f00;
    }

        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute; 
            left:0; 
            display:none; 
            margin:0 0 0 -1px; 
            padding:0; 
            list-style:none;
        }

        #nav ul li {
            width:100px; 
            float:left; 
            border-top:1px solid #fff;
        }

        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block;  
            height:15px;
            padding: 8px 5px; 
            color:#666;
        }

        #nav ul a:hover {
            text-decoration:underline;  
        }

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}

3. کد javascript

تمام کد مورد نیاز برای اجرای این منو، همین چند خط است که به لطف کتابخانه دوست داشتنی jQuery تا این حد کوتاه شده است. برای اجرای حرکت های انیمیشنی و پائین افتادن زیر منوها، در رویداد hover از توابع پایه انیمشن SlideUp و SlideDown استفاده میکنیم. اکنون کافیست کتابخانه جی کوئری را به همراه کدهای زیر در بخش صفحه مورد نظر اضافه کنیم :

دستور فراخوانی کتابخانه جی کوئری:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

کد جی کوئری برای اجرای منو:

$(document).ready(function () { 

    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul', this).slideUp(100);         
        }
    );

});

نکته: با تغییر عدد 100 در کدهای بالا، سرعت باز و بسته شدن منو در واحد میلی ثانیه تغییر خواهد کرد.