jquery實現向下滑出的二級導航下滑選單效果_jquery
- WBOY原創
- 2016-05-16 15:43:041359瀏覽
本文實例講述了jquery實現向下滑出的二級導航下滑選單效果。分享給大家供大家參考。具體如下：
這是一款由jQuery配合JavaScript來共同實現的網頁上的下滑菜單特效，帶顏色的是一級主菜單，點擊後會展開向上滑出二級的子菜單，再次點擊主菜單，會合攏子菜單，就菜單所能展現的功能來說，適用於企業網站產品分類、新聞類文章欄目導航等，目前本款菜單支援兩級，有興趣的可自行擴展更多級的菜單。
運作效果截圖如下：
線上示範網址如下：
http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/
具體程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
<ul id="sidemenu">
<li><a href="#" >+ 网页菜单类素材一</a>
<ul>
<li><a href="#">下滑菜单</a></li>
<li><a href="#">折叠菜单</a></li>
<li><a href="#">垂直菜单</a></li>
</ul>
</li>
<li><a href="#" >+ 编程源码类资源</a>
<ul>
<li><a href="#">ASP源码</a></li>
<li><a href="#">Delphi源码</a></li>
<li><a href="#">vc++源码</a></li>
<li><a href="#">VB源码</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
$('#sidemenu ul').hide();
$('#sidemenu ul:first').hide();
$('#sidemenu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#sidemenu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
</body>
</html>
希望本文所述對大家的jquery程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn