jquery css多级下拉菜单
多级菜单,理论上支持无限多的层级,文件结构非常简单的,具体的请看下面的内容
html文件部分
XML/HTML Code复制内容到剪贴板
- <ul id="nav">
- <li class="site-name"><a href="#"> </a></li>
- <li class="yahoo"><a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>
- <ul>
- <li><a href="#">导航菜单二级分类 »</a>
- <ul>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">导航菜单三 »</a>
- <ul>
- <li><a href="#">导航菜单4</a></li>
- <li><a href="#">1</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- </ul>
- </li>
- <li class="facebook"><a href="#">翻页</a>
- <ul>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- </ul>
- </li>
- </ul>
js文件
JavaScript Code复制内容到剪贴板
- <script>
- $(document).ready(function(){
- $("#nav li").hover(
- function(){
- $(this).children('ul').hide();
- $(this).children('ul').slideDown('fast');
- },
- function () {
- $('ul', this).slideUp('fast');
- });
- });
- </script>
css文件
CSS Code复制内容到剪贴板
- <style>
- /* navigation style */
- #nav{
- height: 39px;
- font: 12px Geneva, Arial, Helvetica, sans-serif;
- background: #2D2D2D;
- border: 1px solid #323232;
- border-radius: 3px;
- min-width:500px;
- margin-left: 0px;
- padding-left: 0px;
- }
- #nav li{
- list-style: none;
- display: block;
- float: left;
- height: 40px;
- position: relative;
- border-right: 1px solid #323232;
- }
- #nav li a{
- padding: 0px 10px 0px 30px;
- margin: 0px 0;
- line-height: 40px;
- text-decoration: none;
- border-right: 1px solid #636161;
- height: 40px;
- color: #FFF;
- text-shadow: 1px 1px 1px #66696B;
- }
- #nav ul{
- background: #f2f5f6;
- padding: 0px;
- border-bottom: 1px solid #DDDDDD;
- border-right: 1px solid #DDDDDD;
- border-left:1px solid #DDDDDD;
- border-radius: 0px 0px 3px 3px;
- box-shadow: 2px 2px 3px #ECECEC;
- -webkit-box-shadow: 2px 2px 3px #ECECEC;
- -moz-box-shadow:2px 2px 3px #ECECEC;
- width:170px;
- }
- #nav .site-name,#nav .site-name:hover{
- padding-left: 10px;
- padding-right: 10px;
- color: #FFF;
- background: url(images/logo.png) no-repeat 10px 5px;
- width: 160px;
- }
- #nav .site-name a{
- width: 129px;
- overflow:hidden;
- }
- #nav li.facebook{
- background: url(images/facebook.png) no-repeat 9px 12px;
- }
- #nav li.facebook:hover {
- background: url(images/facebook.png) no-repeat 9px 12px #010101;
- }
- #nav li.yahoo{
- background: url(images/yahoo.png) no-repeat 9px 12px;
- }
- #nav li.yahoo:hover {
- background: url(images/yahoo.png) no-repeat 9px 12px #010101;
- }
- #nav li:hover{
- background: #010101;
- }
- #nav li a{
- display: block;
- }
- #nav ul li {
- border-right:none;
- border-bottom:1px solid #DDDDDD;
- width:170px;
- height:39px;
- }
- #nav ul li a {
- border-right: none;
- color:#6791AD;
- text-shadow: 1px 1px 1px #FFF;
- border-bottom:1px solid #FFFFFF;
- }
- #nav ul li:hover{background:#DFEEF0;}
- #nav ul li:last-child { border-bottom: none;}
- #nav ul li:last-child a{ border-bottom: none;}
- /* Sub menus */
- #nav ul{
- display: none;
- visibility:hidden;
- position: absolute;
- top: 40px;
- }
- /* Third-level menus */
- #nav ul ul{
- top: 0px;
- left:170px;
- display: none;
- visibility:hidden;
- border: 1px solid #DDDDDD;
- }
- /* Fourth-level menus */
- #nav ul ul ul{
- top: 0px;
- left:170px;
- display: none;
- visibility:hidden;
- border: 1px solid #DDDDDD;
- }
- #nav ul li{
- display: block;
- visibility:visible;
- }
- #nav li:hover > ul{
- display: block;
- visibility:visible;
- }
- </style>
- <!--[if IE 7]>
- <style>
- #nav{
- margin-left:0px
- }
- #nav ul{
- left:-40px;
- }
- #nav ul ul{
- left:130px;
- }
- #nav ul ul ul{
- left:130px;
- }
- </style>
- <![endif]-->
相关推荐
本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法。分享给大家供大家参考。具体如下: 这里介绍的jQuery多级下拉菜单导航-多级下拉菜单,英文名叫 DropDown Menu。通过 each() 遍历添加相应的处理事件 ...
这是一款非常实用的jQuery和CSS3响应式多用途多级下拉菜单插件。该下拉菜单插件可以将目录进行分组多级展示,可以以网格形式展示缩略图,还可以使用图标和文字混搭,适合于网站目录或产品目录较多的站点使用。
jquery滑块多级下拉导航菜单.zip
我们以前分享过很多各种各样的jQuery和CSS3下拉菜单,有支持右键菜单的下拉菜单,比如jQuery自定义下拉框选择菜单 支持右键弹出菜单,也有支持多级的下拉菜单,比如jQuery左侧带小图标的多级下拉菜单。今天我们要...
jQuery css3黑色的多级导航菜单下拉列表代码 自己花5元钱下载的插件
之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这款HTML5/CSS3水平二级下拉菜单,也有的非常炫酷,比如这款jQuery/CSS3波浪形弹性下拉菜单。今天我们要介绍的是另外一款下拉菜单导航,它是纯...
ASP.NETJQuery多级下拉菜单源码 这是一个易于使用且功能强大的ASP.NET菜单控件,是一个标准的且易于更换的ASP.NET Menu控件。它支持无限级子菜单。它支持JQuery中显示隐藏子菜单的效果。强大的CSS主题,它可以正常...
jquery动态弹性多级下拉菜单.zip
jQuery实现移动客户端多级下拉导航菜单
黑色的jquery css网站多级菜单,支持两级,下拉式显示子菜单,黑色风格,这个下拉菜单,是当鼠标单击主菜单项后边的小三角时,二级子菜单才会没出来,萝卜白菜各有所爱吧,有些人觉得这样可控性更好,有些人觉得不太...
jQuery渐变多级下拉导航.zip
记得之前我们给大家分享过一些飘带式的菜单,比如CSS3 飘带菜单 超酷3D CSS3菜单和CSS3飘带状多级下拉菜单;也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉...
红色多级下拉菜单,是学习Div CSS jquery制作菜单的一个好实例,可以显示5级子菜单,关于本菜单中的JS封装,作者其实是想利用一些私有方法和变量,但是这么包装,感觉有些不伦不类,既然还是要搞了半天,还是返回的...
多级CSS3下拉菜单导航.zip
bootstrap2多级下拉菜单,在dropdown.js 的基础上添加jquery.hover ,修改css样式,实现功能
多级CSS3动画下拉导航菜单基于jquery-1.8.3.min.js制作,黑色风格
Bootstrap响应式多级下拉导航菜单基于bootstrap.3.3.6.min.css和jquery-1.11.0.min.js制作,界面简洁,四级下拉导航菜单。
jQuery响应式多级下拉导航菜单特效.zip
jQuery响应式多级下拉导航菜单特效是一款基于jQuery+CSS3实现的白色简洁样式风格网站导航代码。【站长素材】收集整理,转载请注明出处!
json数据创建多级下拉菜单.zip