<!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>平滑过渡效果大型下拉菜单js特效</title> <meta name="keywords" content="平滑过渡,过渡效果,下拉菜单,js特效" /> <meta name="description" content="一款简单的jQuery大型下拉菜单插件，带有平滑过渡效果，以及鼠标滑过菜单项时的动画效果。" /> <link rel="stylesheet" href="css/booNavigation.css"> </head>
<body> <div class="wrapper"> <nav id="booNavigation" class="booNavigation"> <ul> <li class="navItem"> <a href="#">菜单一</a> <ul class="navContent"> <li> <ul> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> <li><a href="#" title="The best cat">The best cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> </ul> </li> <li> <ul> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> <li><a href="#" title="The best cat">The best cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> </ul> </li> <li> <ul> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> <li><a href="#" title="The best cat">The best cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> </ul> </li> </ul> </li>
<li class="navItem"> <a href="#">菜单二</a> <ul class="navContent"> <li> <ul> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> </ul> </li> <li> <ul> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> </ul> </li> <li> <ul> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> </ul> </li> </ul> </li>
<li class="navItem"> <a href="#">菜单三</a> <ul class="navContent"> <li> <ul> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> </ul> </li> <li> <ul> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> </ul> </li> <li> <ul> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Boo the cat">Boo the cat</a><li/> <li><a href="#" title="The invisible cat">The invisible cat</a><li/> <li><a href="#" title="The amazing cat">The amazing cat</a><li/> <li><a href="#" title="Play with Boo the cat">Play with Boo the cat</a><li/> <li><a href="#" title="Pictures of Boo">Pictures of Boo</a><li/> </ul> </li> </ul> </li> </ul> </nav>
</div>
<!-- Scripts for jQuery and the plugin --> <script src="js/jquery.min.js"></script> <script src="js/booNavigation.js"></script> <script> (function() {
/** * This is the call we have to do to execute * the plugin giving a custom params */ $('#booNavigation').booNavigation({ slideSpeed: 400 });
$('#booNavigationTwo').booNavigation({ slideSpeed: 200 });
})();
</script> </body> </html> |
