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

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

به ادامه مطلب بروید.

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

دمو

<script src="http://suntools.ir/upload/suntools/scripts/2.js"></script> <link href="http://suntools.ir/upload/suntools/tools-styles/Blue_menu_Step.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="http://suntools.ir/upload/suntools/scripts/tools/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("ul#SunTools_topnav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : '#1376c9 url(http://suntools.ir/upload/suntools/image/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="SunTools_blue__menu"> <ul id="SunTools_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> <textarea>