ابزار منو پله ای برای وبلاگ و سایت

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

دمو

<link href="https://rozup.ir/up/code-webyar/blue-menu-Step/Blue_menu_Step.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="https://rozup.ir/up/code-webyar/blue-menu-Step/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("ul#WebYar_topnav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : '#1376c9 url(https://rozup.ir/up/code-webyar/blue-menu-Step/topnav_a.gif) repeat-x'}); //Add background color + image on hovered list item $(this).find("span").show(); //Show the subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav }); }); </script> <div class="WebYar_blue__menu"> <ul id="WebYar_topnav"> <li><a href="آدرس لینک 1">عنوان لینک 1</a></li> <li> <a href="آدرس لینک 2">عنوان لینک 2</a> <span> <a href="آدرس لینک 1-2">عنوان لینک 1-2</a> <a href="آدرس لینک 2-2">عنوان لینک 2-2</a> <a href="آدرس لینک 3-2">عنوان لینک 3-2</a> </span> </li> <li> <a href="آدرس لینک 3">عنوان لینک 3</a> <span> <a href="آدرس لینک 1-3">عنوان لینک 1-3</a> <a href="آدرس لینک 2-3">عنوان لینک 2-3</a> <a href="آدرس لینک 3-3">عنوان لینک 3-3</a> </span> </li> <li> <a href="آدرس لینک 4">عنوان لینک 4</a> </ul> </div> <div style="display:none"><h1><a href="http://www.WebYar.rozblog.com">codes and tools for blog</a></h1>