首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现的多级下拉菜单效果代码

Posted in Javascript onAugust 24, 2015

本文实例讲述了jQuery实现的多级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体上来看，和Windows系统的“经典”主题时的菜单风格特别相似，配合图片，整体效果还是相当有专业水准的。

运行效果截图如下：

jQuery实现的多级下拉菜单效果代码

在线演示地址如下：

具体代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级下拉菜单</title>
</head>
<body>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
$('#menu li').hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1
 },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
 });
});
</script>
<style>
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}
#menu {width:750px; height:531px; background:url(images/snowboard.jpg); text-align:center; margin:0 auto;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}
#menu b {position:absolute;}
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}
#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
#menu li.left ul a {text-align:right;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.drop {background:transparent url(images/white-down.gif) no-repeat right center;}
#menu li a.fly {background:transparent url(images/white-right.gif) no-repeat right center;}
#menu li.left ul a.fly {background:transparent url(images/white-left.gif) no-repeat left center;}
#menu li a:hover,
#menu li a.fly:hover {color:#c60; background-color:#c0c0c8;}
#menu li:hover > a,
#menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}
</style>
<div class="examples">
 <div id="menu">
  <ul class="level1">
   <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
   <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Email</a></li>
     <li><a href="#url">Telephone</a></li>
     <li><a href="#url">Online Form</a></li>
     <li><a href="#url">Snail Mail Address</a><b></b></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Ski Hire Facilities</a></li>
     <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Beginners Slopes</a></li>
       <li><a href="#url">Intermediate Slopes</a></li>
       <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="level4">
         <li><a href="#url">Local</a></li>
         <li><a href="#url">Nearby</a></li>
         <li><a href="#url">With instructor</a></li>
         <li><a href="#url">Snow boarding</a><b></b></li>
        </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#url">Expert</a></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#url">Night Life</a></li>
     <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Snow Hotel</a></li>
       <li><a href="#url">The Snowman</a></li>
       <li><a href="#url">Ice Cavern</a></li>
       <li><a href="#url">Ski Inn</a><b></b></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">From Airport</a></li>
       <li><a href="#url">In Resort</a></li>
       <li><a href="#url">Multiple Resorts</a><b></b></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Where to go</a></li>
     <li><a href="#url">What to do</a></li>
     <li><a href="#url">Places of interest</a></li>
     <li><a href="#url">National parks & Museums</a><b></b></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="level2">
     <li><a href="#url">Money Exchange</a></li>
     <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Lift Passes</a></li>
       <li><a href="#url">Insurance</a></li>
       <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="level4">
         <li><a href="#url">Boots</a></li>
         <li><a href="#url">Skis</a></li>
         <li><a href="#url">Ski Wear</a></li>
         <li><a href="#url">Goggles</a><b></b></li>
        </ul>
       <!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#url">Ski Schools</a></li>
       <li><a href="#url">Snow Report</a></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="level3">
       <li><a href="#url">Austrian</a></li>
       <li><a href="#url">German</a></li>
       <li><a href="#url">French</a></li>
       <li><a href="#url">English</a><b></b></li>
      </ul>
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#url">Short Breaks</a></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
  </ul>
 </div>
 <div style="clear:both"></div>
</div>
<hr style="clear:both;" />
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jQuery实现的多级下拉菜单效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
cument.execCommand()用法深入理解
Dec 04 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
js贪吃蛇网页版游戏特效代码分享（挑战十关）
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 #Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 #Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 #Javascript
i7 6700(1) Tomcat(18) 分析统计(1) 窗口函数(3) win11(40) 速龙(1) ipad(1) i5 9400(1) win10(43) i5 10400(1)
You might like
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
PHP文件上传问题汇总（文件大小检测、大文件上传处理）
2015/12/24 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python 美化输出信息的实例
2018/10/15 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python循环输出三角形图案的例子
2019/11/22 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python 从attribute到property详解
2020/03/05 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
公司员工的自我评价范例
2013/11/01 职场文书
好的演讲稿开场白
2013/12/30 职场文书
学习十八大报告感言
2014/02/04 职场文书
户外活动总结范文
2014/04/30 职场文书
政治思想表现评语
2014/05/04 职场文书
售房协议书范本2014
2014/10/23 职场文书
财务部会计岗位职责
2015/02/03 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android