首页
所有分类
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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
IE的有条件注释判定IE版本详解（附实例代码）
Jan 04 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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
Jmerte(1) TimePickerView(1) click(1) Yolov5(1) 自定义组件(1) HashSet集合(1) Storage(1) KVM(1) 本地化存储(1) Vue(10)
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
php使用mysqli和pdo扩展，测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
Nodejs抓取html页面内容（推荐）
2016/08/11 NodeJs
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）
2017/06/04 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python远程登录代码
2008/04/29 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python 复平面绘图实例
2019/11/21 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python numpy实现rolling滚动案例
2020/06/08 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
如何一键升级Python所有包
2020/11/05 Python
python try...finally...的实现方法
2020/11/25 Python
Tostadora意大利：定制T恤
2019/04/08 全球购物
推荐信怎么写
2014/05/09 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js