jquery实现多级下拉菜单的实例html
更新时间:2013年10月3日 13:47 点击:1907
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery实现多级下拉菜单-柯乐义</title> <style> /* navigation style */ #keleyi-com-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; } #keleyi-com-nav li{ list-style: none; display: block; float: left; height: 40px; position: relative; border-right: 1px solid #323232; } #keleyi-com-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; } #keleyi-com-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; } #keleyi-com-nav .site-name,#keleyi-com-nav .site-name:hover{ padding-left: 10px; padding-right: 10px; color: #FFF; background: url(http://zhuxianfei.com/keleyi/phtml/jqmenu/4/logo.png) no-repeat 10px 5px; width: 160px; } #keleyi-com-nav .site-name a{ width: 129px; overflow:hidden; } #keleyi-com-nav li.facebook{ background: url(http://zhuxianfei.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px; } #keleyi-com-nav li.facebook:hover { background: url(http://zhuxianfei.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #010101; } #keleyi-com-nav li.yahoo{ background: url(http://zhuxianfei.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px; } #keleyi-com-nav li.yahoo:hover { background: url(http://zhuxianfei.com/keleyi/phtml/jqmenu/4/yahoo.png) no-repeat 9px 12px #010101; } #keleyi-com-nav li:hover{ background: #010101; } #keleyi-com-nav li a{ display: block; } #keleyi-com-nav ul li { border-right:none; border-bottom:1px solid #DDDDDD; width:170px; height:39px; } #keleyi-com-nav ul li a { border-right: none; color:#6791AD; text-shadow: 1px 1px 1px #FFF; border-bottom:1px solid #FFFFFF; } #keleyi-com-nav ul li:hover{background:#DFEEF0;} #keleyi-com-nav ul li:last-child { border-bottom: none;} #keleyi-com-nav ul li:last-child a{ border-bottom: none;} /* Sub menus */ #keleyi-com-nav ul{ display: none; visibility:hidden; position: absolute; top: 40px; } /* Third-level menus */ #keleyi-com-nav ul ul{ top: 0px; left:170px; display: none; visibility:hidden; border: 1px solid #DDDDDD; } /* Fourth-level menus */ #keleyi-com-nav ul ul ul{ top: 0px; left:170px; display: none; visibility:hidden; border: 1px solid #DDDDDD; } #keleyi-com-nav ul li{ display: block; visibility:visible; } #keleyi-com-nav li:hover > ul{ display: block; visibility:visible; } </style> <!--[if IE 7]> <style> #keleyi-com-nav{ margin-left:0px } #keleyi-com-nav ul{ left:-40px; } #keleyi-com-nav ul ul{ left:130px; } #keleyi-com-nav ul ul ul{ left:130px; } </style> <![endif]--> <script type="text/javascript" src="http://zhuxianfei.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#kel"+"eyi-com-nav li").hover( function () { $(this).children('ul').hide(); $(this).children('ul').slideDown('fast'); }, function () { $('ul', this).slideUp('fast'); }); }); </script> </head> <body> <ul id="keleyi-com-nav"> <li class="site-name"><a href="http://zhuxianfei.com"> </a></li> <li class="yahoo"><a href="http://zhuxianfei.com">导航菜单</a> <ul> <li><a href="http://zhuxianfei.com/a/bjac/veugsmw9.htm">导航菜单二级分类 »</a> <ul> <li><a href="http://zhuxianfei.com">1</a></li> <li><a href="http://zhuxianfei.com/a/bjac/r55i6646.htm">2</a></li> <li><a href="http://zhuxianfei.com">3</a></li> <li><a href="http://zhuxianfei.com">导航菜单三 »</a> <ul> <li><a href="http://zhuxianfei.com">导航菜单4</a></li> <li><a href="http://zhuxianfei.com/a/bjac/c6gu08gm.htm">1</a></li> </ul> </li> </ul> </li> <li><a href="http://zhuxianfei.com">1</a></li> <li><a href="http://zhuxianfei.com">2</a></li> </ul> </li> <li class="facebook"><a href="http://zhuxianfei.com">翻页</a> <ul> <li><a href="http://zhuxianfei.com">1</a></li> <li><a href="http://zhuxianfei.com">2</a></li> </ul> </li> </ul> </body> </html>
相关文章
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools...2015-10-23
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更...2015-10-21
- 这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-09
- 本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果。分享给大家供大家参考,具体如下:这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的大家见的比较多了,本款从形式上来说与其它的没什么差别,只是浮...2015-11-08
- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30
- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单,有加载等待效果,有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15
- 这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-23
- 本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考,具体如下:这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东。...2015-10-23
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
首先是数据库的设计。分类表叫cate.我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id。数据库有内容后,就可以开始写代码,进...2014-05-31- 这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06
- 这篇文章主要介绍了jquery实现树形菜单完整代码,需要的朋友可以参考下...2016-01-02
- 写递归函数,可考虑缓存,定义一些静态变量来存上一次运行的结果,多程序运行效率很有帮助.。 大概步骤如下: step1:到数据库取数据,放到一个数组, step2:把数据转化为一个树型状的数组, step3:把这个树型状的数组转为html代码。...2015-11-08
- 这篇文章主要介绍了C#自定义控件添加右键菜单的方法,本文用到control控件,专门自定义右键菜单,下面小编给大家整理下,有需要的小伙伴可以来参考下...2020-06-25
- 本文介绍了“winform树形菜单无限级分类实例”,需要的朋友可以参考一下...2020-06-25
- 这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-12
- 这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,感兴趣的小伙伴们可以参考一下...2016-04-19