ホームページ > 記事 > ウェブフロントエンド > jquery は、スライド ダウンするセカンダリ ナビゲーションのスライド ダウン メニュー効果を実装します_jquery
この記事の例では、jquery がセカンダリ ナビゲーションのスライド ダウン メニュー効果を実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、jQuery と JavaScript によって実装された Web ページのスライド ダウン メニュー効果です。色付きのメニューをクリックすると、展開されて 2 番目のレベルのサブメニューに移動します。メインメニューを再度開くと、サブメニューが折りたたまれます。メニューが表示できる機能の点で、企業 Web サイトの製品分類、ニュース記事のコラムナビゲーションなどに適しています。現在、このメニューは 2 つのレベルをサポートしています。より多くのレベルのメニューを自分で拡張できます。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
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 プログラミング設計に役立つことを願っています。