本篇內容主要講解“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如何實現平滑過渡大型下拉菜單效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
