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

最新推荐文章于 2024-05-06 21:09:29 发布

juunnry

最新推荐文章于 2024-05-06 21:09:29 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： ĴQuery

本文链接：https://blog.csdn.net/huaxiawudi/article/details/83383456

版权

这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下:

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

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

运行效果截图如下：

<!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:visibl

最低0.47元/天解锁文章

juunnry

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS--jQuery实现的多级下拉菜单效果代码

这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下:本文实例讲述了jQuery实现的多级下拉菜单效果代码。供大家参考。具体如下：这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体...
复制链接

扫一扫