طراحی منو Dropdownبا jQuery

[elham1388]

ایجاد منو یکی از مهم ترین فاکتور ها در طراحی سایت می باشد. علاوه بر بحث زیبایی، در منو می بایست لینک دهی مناسب صفحات سایت گنجانده شود. JQuery یکی از زبان های پرکاربرد در ایجاد منو می باشد و این امکان را فراهم می آورد که به آسانی منوی زیبایی را در طراحی وب سایت خود بگنجانید. در اینجا مثالی از ایجاد منو با استفاده از زبان JQuery درج شده است.


منوی Dropdown قابلیت پنهان نمودن زیر منوها ونیز استفاده از استایل های و ایفکت های زیبا را دارد. در ایجاد این منو از زبان های html. ، css و JQuery استفاده شده است. ابتدا کد html لازمه را به نمایش می گذاریم.








<ul class="myMenu">


<li><a href="#">menu item 1</a></li>


<li><a href="#">menu item 2</a>


<ul>


<li><a href="#">sub menu item 1</a></li>


<li><a href="#">sub menu item 2</a></li>


<li><a href="#">sub menu item 3</a></li>


</ul>


</li>


<li><a href="#">menu item 3</a>


<ul>


<li><a href="#">sub menu item 1</a></li>


<li><a href="#">sub menu item 2</a></li>


<li><a href="#">sub menu item 3</a></li>


</ul>


</li>


<li><a href="#">menu item 4</a></li>


<li><a href="#">menu item 5</a></li>


</ul>





حال استایل ها و کد css این منو را درج می نماییم.






/*style the main menu*/
.myMenu {
margin:0;
padding:0;
}


.myMenu li {
list-style:none;
float:left;
font:12px Arial, Helvetica, sans-serif #111;
}


.myMenu li a:link, .myMenu li a:visited {
display:block;
text-decoration:none;
background-color:#09F;
padding: 0.5em 2em;
margin:0;
border-right: 1px solid #fff;
color:#111;
}


.myMenu li a:hover {
background-color:#0CF;
}


/*style the sub menu*/
.myMenu li ul {
position:absolute;
visibility:hidden;
border-top:1px solid #fff;
margin:0;
padding:0;
}


.myMenu li ul li {
display:inline;
float:none;
}


.myMenu li ul li a:link, .myMenu li ul li a:visited {
background-color:#09F;
width:auto;
}


.myMenu li ul li a:hover {
background-color:#0CF;
}





توجه داشته باشید که در زیر منوها visibility:hidden تنظیم شده است بدین منظور که زیر منوها قابلیت پنهان شدن داشته باشند.حال می بایست کد jQuery لازم برای ایجاد این منو در طراحی سایت خود وارد نمایید. این قطعه کد را در بخش head صفحه سایت خود اضافه نمایید.





<script type="text/j-avascript" src="/demo/jquery.js"></script>



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







<script type="text/j-avascript">
$(document).ready(function() {


//our code will go here


});
</script>


$('.myMenu > li').bind('mouseover', openSubMenu);





function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};











$('.myMenu > li').bind('mouseout', closeSubMenu);
And then add the new function:




function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
};





با درج کدهای بالا در طراحی سایت خود، یک منوی Dropdown خواهید داشت و با تغییر کدهای css می توانید استایل مورد نظر خود را پیاده سازی نمایید. زیبایی صفحه وب سایت موجب جلب نظر کاربر می شود و در نتیجه آن در سئو سایت بسیار اثرگذار می باشد.




منبع: طراحی منو Dropdownبا jQuery (http://www.npco.net/demo/articles/339-dropdown-jquery.html)