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

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

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

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

相关问答

Q1: 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

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

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

html:

div class="webSchoolL" id="webSchoolL"

ul class="leftTab" id="leftMeau"

li class="listL01"1/li

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

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

/ul

/li

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

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

/ul

/li

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

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

/ul

/li

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

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

/ul

/li

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

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

/ul

/li

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

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

/ul

/li

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

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

/ul

/li

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

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

/ul

/li

/ul

/div

2

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;}

3

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();

});

})

4

效果如图所示

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

END

注意事项

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

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

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

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

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

$(document).ready(function(){

init();

});

function

init(){

$("#Menuulli").hover(

function(){

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

},

function(){

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

}

);

}

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

Q5: 如何用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

   ul

    lia href="#"Company/a/li

    lia href="#"Authors/a/li

    lia href="#"Advertising/a/li

   /ul

  /li

  lia href="#"RSS订阅/a

   ul

    lia href="#"PSD/a/li

    lia href="#"Patterns/a/li

    lia href="#"Icons/a/li

   /ul   

  /li

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

   ul

    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

   ul

    lia href="#"Performance/a/li

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

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

   /ul

  /li

  lia href="#"Originals/a

   ul

    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