如何讓jquery左側(cè)菜單彈出的二級(jí)不超出顯示范圍

最簡(jiǎn)單的方法就是將二級(jí)菜單都使用絕對(duì)定位， 然后指定好每個(gè)二級(jí)菜單顯示的位置。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的和平網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

但我不建議這么做?？梢远x一個(gè)容器來(lái)專(zhuān)門(mén)顯示二級(jí)菜單。這個(gè)容器的高和寬可以根據(jù)一級(jí)菜單和屏幕寬度來(lái)限制。這樣，二級(jí)菜單都將從頂部對(duì)齊。不過(guò)很少見(jiàn)有從底部對(duì)齊的設(shè)計(jì)。

jQuery如何實(shí)現(xiàn)鼠標(biāo)移入移出顯示與隱藏二級(jí)菜單啊

div?class="parent"

lia區(qū)域/li

div?class="bb"bbbbb區(qū)域/div

/div

style

.bb{display:none;}

/style

script

//引入jquery.js后

$(function(){

$(".parent").hover(

function(){

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

},

functin(){

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

}

);

})

/script

jquery實(shí)現(xiàn)二級(jí)菜單時(shí)，點(diǎn)擊一級(jí)菜單，二級(jí)菜單滑出一下就又消失了

jquery實(shí)現(xiàn)由一級(jí)導(dǎo)航菜單到二級(jí)滑動(dòng)顯示效果，并點(diǎn)擊增加背景變化效果，代碼挺簡(jiǎn)單的，但是也效果也很好，是非常實(shí)用的，也是很流行的菜單樣式

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(){//導(dǎo)航特效

$("#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

效果如圖所示

（此圖看不出滑動(dòng)效果，但實(shí)際效果確實(shí)是滑動(dòng)效果）

END

注意事項(xiàng)

此方法簡(jiǎn)單靈活，拿來(lái)就可以應(yīng)用，應(yīng)用修改時(shí)請(qǐng)注意三種樣式一起修改，避免代碼無(wú)用

另外應(yīng)用時(shí)記得把jquery類(lèi)庫(kù)引到頁(yè)面中來(lái)，否則無(wú)效果

jquery怎么寫(xiě)伸縮的二級(jí)導(dǎo)航菜單

建議樓主改一下主體結(jié)構(gòu) 一級(jí)菜單 二級(jí)菜單 二級(jí)菜單 一級(jí)菜單 二級(jí)菜單 二級(jí)菜單 把一級(jí)菜單的li設(shè)置為相對(duì)定位，把二級(jí)菜單的ul設(shè)置為絕對(duì)定位并隱藏，然后在js中寫(xiě) $("#menuli").hover(function(){ $(this).find("ul").show(); },function()

請(qǐng)教jQuery高手，寫(xiě)下拉菜單，怎么控制二級(jí)菜單出現(xiàn)與消失

$(document).ready(function(){

init();

});

function

init(){

$("#Menuulli").hover(

function(){

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

},

function(){

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

}

);

}

還需要強(qiáng)調(diào)的是，二級(jí)菜單的距離不要離一級(jí)導(dǎo)航有縫隙，否則會(huì)點(diǎn)不到二級(jí)菜單的。這個(gè)就是二級(jí)菜單的樣式的問(wèn)題了～

如何用jq 的hover() 寫(xiě)二級(jí)聯(lián)機(jī)菜單?

鼠標(biāo)劃過(guò)顯示二級(jí)菜單：

!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="#"網(wǎng)站主頁(yè)/a/li

lia?href="#"關(guān)于我/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