jquery實現(xiàn)向下滑出的二級導航下滑菜單效果
更新時間：2015年08月25日 11:15:32 作者：企鵝
這篇文章主要介紹了jquery實現(xiàn)向下滑出的二級導航下滑菜單效果,涉及jquery實現(xiàn)頁面結點樣式動態(tài)變換效果的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)向下滑出的二級導航下滑菜單效果。分享給大家供大家參考。具體如下：
這是一款由jQuery配合JavaScript來共同實現(xiàn)的網頁上的下滑菜單特效，帶顏色的是一級主菜單，點擊后會展開向上滑出二級的子菜單，再次點擊主菜單，會合攏子菜單，就菜單所能展現(xiàn)的功能來說，適用于企業(yè)網站產品分類、新聞類文章欄目導航等，目前本款菜單支持兩級，有興趣的可自己擴展更多級的菜單。
運行效果截圖如下：
在線演示地址如下：
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程序設計有所幫助。
相關文章
jquery實現(xiàn)適用于門戶站的導航下拉菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)適用于門戶站的導航下拉菜單效果代碼,可實現(xiàn)鼠標滑過菜單項實現(xiàn)下拉列表顯示效果的功能,非常具有實用價值,需要的朋友可以參考下2015-08-08
這里推薦給大家一款jquery動態(tài)云標簽的插件，非常的炫，在指定塊級元素內動態(tài)生成a標簽，a標簽的高度、寬度、位置、層數(shù)、背景顏色隨機可控，a標簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標懸浮停止動畫且透明度最大，層數(shù)最高，鼠標離開，恢復之前狀態(tài)2014-11-11
本文主要對jquery中的each用法進行介紹，相信會對大家學習each方法會很有幫助，下面就跟小編一起來看下吧2016-12-12
本文主要介紹jQuery中on方法使用注意事項。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
最近使用jquery寫了一個圖片滑動的插件，雖然還是有些問題存在，用法很簡單，希望對大家有所幫助2013-11-11
這篇文章主要介紹了基于jQuery實現(xiàn)動態(tài)搜索顯示功能的相關資料,輸入數(shù)值自動匹配相關信息，感興趣的小伙伴們可以參考一下2016-05-05
JQuery省市聯(lián)動效果實現(xiàn)過程詳解
這篇文章主要介紹了JQuery省市聯(lián)動效果實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
jquery動態(tài)賦值id與動態(tài)取id方法示例
這篇文章主要給大家介紹了關于jquery動態(tài)賦值id與動態(tài)取id的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-08-08
本文詳細介紹scrollable中方法使用及本文完整示例。2009-09-09
同事在網上的找的下拉列表框出現(xiàn)位置不對的和加載慢的BUG，反正多選下拉列表框實現(xiàn)也很簡單，與其看那些結構混亂的代碼，不如自己重新實現(xiàn)一個2012-07-07