jquery 下拉菜單

script type="text/javascript"

成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、信州網(wǎng)絡(luò)推廣、小程序定制開發(fā)、信州網(wǎng)絡(luò)營銷、信州企業(yè)策劃、信州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供信州建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：chinadenli.net

var timeoutId;

$(function ()

{

$("#menu li").each(function (index)

{

$(this).mouseover(function ()

{

timeoutId = setTimeout(function ()

{

//將所有樣式為contentShow的移除

$("div.contentShow").removeClass("contentShow");

//將當(dāng)前的顯示

$("div.content:eq(" + index + ")").addClass("contentShow").css("margin-left", (index + 0.5) * 100 + "px");

}, 300);

}).mouseout(function ()

{

clearTimeout(timeoutId);

});

});

});

/script

style type="text/css"

div.content{clear:left;display:none;}

div.contentShow{display:block;}

a{text-decoration:none;color:Black;}

A:link {COLOR: #00135b; text-decoration: none;}

A:active {COLOR: #00135b; text-decoration: none;}

A:visited {COLOR: #00135b; text-decoration: none;}

A:hover {COLOR: #ff8a00; text-decoration: none;}

/style

div

ul id="menu" style="list-style:none;"

li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;" 一/li

li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;"二/li

li style=" float:left; margin:0px;cursor:pointer; width:100px; border:1px solid red;"三/li

/ul

div style="margin-top:10px;"

div class="content"

ul style="list-style:none;"

li style="width:100px; border:1px solid blue;"a href=""一/a/li

li style="width:100px; border:1px solid blue;"a href=""二/a/li

li style="width:100px; border:1px solid blue;"a href=""三/a/li

/ul

/div

div class="content"

ul style="list-style:none;"

li style="width:100px; border:1px solid blue;"a href=""df/a/li

li style="width:100px; border:1px solid blue;"a href=""df/a/li

li style="width:100px; border:1px solid blue;"a href=""df/a/li

/ul

/div

div class="content"

ul style="list-style:none;"

li style="width:100px; border:1px solid blue;"a href=""43/a/li

li style="width:100px; border:1px solid blue;"a href=""34/a/li

li style="width:100px; border:1px solid blue;"a href=""34/a/li

/ul

/div

/div

/div

jquery怎么優(yōu)化 下拉菜單效果

下拉菜單的默認(rèn)樣式在不同類型的瀏覽器中顯示的效果非常不同，單純的用css來統(tǒng)一樣式可能非常有局限性，使用Jquery+css優(yōu)化起來不但簡單，而且實用性也非常廣，主要原理為設(shè)置select透明度為0，利用css樣式把span美化成select的樣式，利用jquery把select選擇的option的值傳給span。

下面就是jquery優(yōu)化下拉菜單效果的具體實現(xiàn)代碼：

Html

a?class="btn-select"

span?class="cur-select"請選擇/span

select?class="form-control"

option這是IE瀏覽器下的默認(rèn)顯示效果/option

option這是Firefox瀏覽器下的默認(rèn)顯示效果/option

option這是Opera瀏覽器下的默認(rèn)顯示效果/option

option這是chrome瀏覽器下的默認(rèn)顯示效果/option

/select

/a

CSS

.btn-select?{?

position:?relative;?

display:?block;?

height:30px;

line-height:?30px;?

border:1px?solid?#ccc;

color:#3D3F42;

}?

.btn-select?.cur-select?{?

position:?absolute;?

display:?block;?

width:?100%;?

height:?25px;?

line-height:?25px;?

background:url(/Themes/Employee/Content/images/ico.png)?no-repeat?98%?45%?transparent;?

text-indent:?10px;?

}

.searchInselectW?.store-selector?.btn-select:hover{

background:#fff;

color:#3D3F42;

}

.btn-select:hover,?.cur-select:hover?{

color:#3D3F42;

}

.btn-select?select?{?

position:absolute;

top:0;

left:0;

height:30px;

opacity:0;

filter:alpha(opacity=0);

}?

.btn-select?select?option?{?

text-indent:?10px;?

}?

.btn-select?select?option:hover?{?

color:?#fff;?

}

Jquery

$(function(){

$(document).on("change",?function()?{

$("select").each(function()?{

var?$selectText?=?$(this).children("option:selected").text();

$(this).parent().find("span").text($selectText);

});

});?

}

跪求： jQuery實現(xiàn)下拉菜單

HTML 代碼如下：

div?id="menu"?

ul?

lia?

href=""菜單一/a?

ul?

lia?

href=""子菜單1/a/li?

lia?

href=""子菜單2/a?

ullia?

href=""子菜單7/a/li/ul?

/li?

lia?href=""子菜單3/a/li?

/ul?

/li?

lia?href=""菜單二/a?

ul?

lia?href=""子菜單4/a/li?

lia?

href=""子菜單5/a/li?

lia?

href=""子菜單6/a/li?

/ul?

/li?

/ul?

/div

CSS代碼如下：

ul,ol,li{list-style:none;padding:0px;margin:0px;}?

#menu?

*{line-height:30px;}?

#menu?a{?

text-decoration:none;?

display:block;?

}?

#menu?ul{?

text-align:left;?

background:#333;?

}?

#menu?

.arrow{?/*?菜單項的右側(cè)小箭頭?*/?

float:right;?

padding-right:5px;?

}?

#menuul{height:30px;}?/*?即使沒有菜單項也能保持頂級菜單欄的高度。?*/?

/*?一級菜單?*/?

#menuulli{?

text-align:center;?

display:inline-block;?

width:80px;?

}?

#menuullia{color:#fff;}?

#menuulli:hover{background:#666;}?

/*?下拉的菜單欄?*/?

#menuulli?ul{?

display:none;?

width:150px;?

position:absolute;?

background:#c1cd94;?

box-shadow:2px?2px?2px?#000;?

-webkit-box-shadow:2px?2px?2px?#000;?

-moz-box-shadow:2px?2px?2px?#123;?

}?

/*?下拉菜單的菜單項?*/?

#menuulliul?li{padding-left:5px;?

position:relative;}?

#menuulliul?lia{color:#000;}?

#menuulliul?li:hover{background:#d3dbb3;}?

/*?

三級及以下的菜單項的定位?*/?

#menuulliulli?ul{left:150px;?top:0px;}?

[html]?

這是JS的控制代碼：?

[code]?

$(document).ready(function()?

{?

/*?菜單初始化?*/?

$('#menuulliul').find('li:has(ul:not(:empty))a').append("span?

class='arrow'/span");?//?為有子菜單的菜單項添加''符號?

$("#menuulli").bind('mouseover',function()?//?頂級菜單項的鼠標(biāo)移入操作?

{?

$(this).children('ul').slideDown('fast');?

}).bind('mouseleave',function()?//?頂級菜單項的鼠標(biāo)移出操作?

{?

$(this).children('ul').slideUp('fast');?

});?

$('#menuulliul?li').bind('mouseover',function()?//?子菜單的鼠標(biāo)移入操作?

{?

$(this).children('ul').slideDown('fast');?

}).bind('mouseleave',function()?//?子菜單的鼠標(biāo)移出操作?

{?

$(this).children('ul').slideUp('fast');?

});?

});

關(guān)于jquery下拉菜單

能啊，一級菜單的每個li中放置一個ul，ul中的每個li下再放置一個ul，這樣就三級嵌套了，你只要控制顯示隱藏就好了，給三級的顯示隱藏封裝一個函數(shù)，在二級菜單顯示的時候調(diào)用函數(shù)就可以了

jquery 下拉菜單如何做

使用jQuery配合Superfish制作下拉菜單需要具備以下幾個參數(shù)

1、項目中需要有jQuery版本庫；

2、下載Superfish插件——Superfish；

3.需要把上面兩個js引入你的項目中

導(dǎo)入jQuery庫和Superfish插件

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

為了讓菜單一個默認(rèn)的樣式，大家還可以到superfish下載superfish.css樣式文件，可以直接調(diào)用

link rel="stylesheet" href="css/superfish.css" /

網(wǎng)站名稱：jquery菜單下拉,下拉框和下拉列表
網(wǎng)站網(wǎng)址：http://chinadenli.net/article33/dsggeps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、、品牌網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)