jquery二级菜单,二级菜单的实现

如何让jquery左侧菜单弹出的二级不超出显示范围

最简单的方法就是将二级菜单都使用绝对定位，然后指定好每个二级菜单显示的位置。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的和平网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

但我不建议这么做。可以定义一个容器来专门显示二级菜单。这个容器的高和宽可以根据一级菜单和屏幕宽度来限制。这样，二级菜单都将从顶部对齐。不过很少见有从底部对齐的设计。

jQuery如何实现鼠标移入移出显示与隐藏二级菜单啊

div class="parent"

lia区域/li

div class="bb"bbbbb区域/div

/div

style

.bb{display:none;}

/style

script

//引入jquery.js后

$(function(){

$(".parent").hover(

function(){

$(".bb").show();

functin(){

$(".bb").hide();

}

);

})

/script

jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了

jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式

html:

div class="webSchoolL" id="webSchoolL"

ul class="leftTab" id="leftMeau"

li class="listL01"1/li

a href="#nogo"2/a

ul class="navUl"

lia href="#nogo"22/a/li

lia href="#nogo" class="curButA"22/a/li

lia href="#nogo"22/a/li

/ul

/li

a href="#nogo"3/a

ul class="navUl"

lia href="#nogo"33/a/li

lia href="#nogo" class="curButA"33/a/li

lia href="#nogo"33/a/li

/ul

/li

a href="#nogo"4/a

ul class="navUl"

lia href="#nogo"44/a/li

lia href="#nogo" class="curButA"44/a/li

lia href="#nogo"44/a/li

/ul

/li

a href="#nogo"5/a

ul class="navUl"

lia href="#nogo"55/a/li

lia href="#nogo" class="curButA"55/a/li

lia href="#nogo"55/a/li

/ul

/li

a href="#nogo" class="curButA"6/a

ul class="navUl" style="display:block;"

lia href="#nogo"66/a/li

lia href="#nogo" class="curButA"66/a/li

lia href="#nogo"66/a/li

/ul

/li

a href="#nogo"7/a

ul class="navUl"

lia href="#nogo"77/a/li

lia href="#nogo" class="curButA"77/a/li

lia href="#nogo"77/a/li

/ul

/li

a href="#nogo"8/a

ul class="navUl"

lia href="#nogo"88/a/li

lia href="#nogo" class="curButA"88/a/li

lia href="#nogo"88/a/li

/ul

/li

a href="#nogo"9/a

ul class="navUl"

lia href="#nogo"99/a/li

lia href="#nogo" class="curButA"99/a/li

lia href="#nogo"99/a/li

/ul

/li

/ul

/div

css:

.webSchoolL{ width:200px; height:460px; background:#ececec;}

ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}

ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}

ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}

ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}

ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}

ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}

ul.leftTab li ul.navUl li { float:none;margin:0px;}

ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}

ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}

js:$(function(){//导航特效

$("#leftMeau li:has(ul) a").click(function(){

$(this).addClass("curButA");

$(this).siblings().slideDown();

$(this).parent().siblings().find("a").removeClass("curButA");

$(this).parent().siblings().find("ul").slideUp();

});

})

效果如图所示

（此图看不出滑动效果，但实际效果确实是滑动效果）

END

注意事项

此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用

另外应用时记得把jquery类库引到页面中来，否则无效果

jquery怎么写伸缩的二级导航菜单

建议楼主改一下主体结构一级菜单二级菜单二级菜单一级菜单二级菜单二级菜单把一级菜单的li设置为相对定位，把二级菜单的ul设置为绝对定位并隐藏，然后在js中写 $("#menuli").hover(function(){ $(this).find("ul").show(); },function()

请教jQuery高手，写下拉菜单，怎么控制二级菜单出现与消失

$(document).ready(function(){

init();

});

function

init(){

$("#Menuulli").hover(

function(){

$(this).children("ul").fadeIn("fast");

function(){

$(this).children("ul").fadeOut("fast");

}

);

}

还需要强调的是，二级菜单的距离不要离一级导航有缝隙，否则会点不到二级菜单的。这个就是二级菜单的样式的问题了～

如何用jq 的hover() 写二级联机菜单?

鼠标划过显示二级菜单：

!DOCTYPE html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titlejquery下拉菜单/title

script type="text/javascript" src="jquery-1.6.2.min.js"/script

style

* { margin: 0; padding: 0; }

body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }

.wrap { width: 800px; margin: 0 auto; }

#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }

#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }

#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }

#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }

#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }

#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }

#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }

#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }

#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }

* html #nav ul { margin: 0 0 0 -2px; }

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

/style

/head

body

div class="wrap"

ul id="nav"

lia href="#"网站主页/a/li

lia href="#"关于我/a

lia href="#"Company/a/li

lia href="#"Authors/a/li

lia href="#"Advertising/a/li

/ul

/li

lia href="#"RSS订阅/a

lia href="#"PSD/a/li

lia href="#"Patterns/a/li

lia href="#"Icons/a/li

/ul

/li

lia href="#"精美博文/a

lia href="#"HTML5/a/li

lia href="#"CSS3/a/li

lia href="#"jQuery/a/li

lia href="#"MySQL/a/li

/ul

/li

lia href="#"Web工具/a

lia href="#"Performance/a/li

lia href="#"CMS Plugins/a/li

lia href="#"Cheat Sheets/a/li

/ul

/li

lia href="#"Originals/a

lia href="#"Website Design/a/li

lia href="#"Mobile/a/li

/ul

/li

/ul

/div

script type="text/javascript"

$(document).ready(function() {

$('#nav li').hover(function() {

$('ul', this).slideDown(200);

$(this).children('a:first').addClass("hov");

}, function() {

$('ul', this).slideUp(100);

$(this).children('a:first').removeClass("hov");

});

/script

/body

/html

网站标题：jquery二级菜单,二级菜单的实现
本文路径：http://ybzwz.com/article/dsccigc.html

jquery二级菜单,二级菜单的实现

如何让jquery左侧菜单弹出的二级不超出显示范围

jQuery如何实现鼠标移入移出显示与隐藏二级菜单啊

jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了

jquery怎么写伸缩的二级导航菜单

请教jQuery高手，写下拉菜单，怎么控制二级菜单出现与消失

如何用jq 的hover() 写二级联机菜单?

其他资讯