js如何实现平滑过渡大型下拉菜单效果
js如何实现平滑过渡大型下拉菜单效果
本篇内容主要讲解“js如何实现平滑过渡大型下拉菜单效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js如何实现平滑过渡大型下拉菜单效果”吧!
代码：
<!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>
到此，相信大家对“js如何实现平滑过渡大型下拉菜单效果”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
