jquery菜单下拉,下拉框和下拉列表

jquery 下拉菜单

script type="text/javascript"

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、成都网站制作、成都外贸网站建设、信州网络推广、小程序定制开发、信州网络营销、信州企业策划、信州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供信州建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

var timeoutId;

$(function ()

{

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

{

$(this).mouseover(function ()

{

timeoutId = setTimeout(function ()

{

//将所有样式为contentShow的移除

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

//将当前的显示

$("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怎么优化 下拉菜单效果

下拉菜单的默认样式在不同类型的浏览器中显示的效果非常不同，单纯的用css来统一样式可能非常有局限性，使用Jquery+css优化起来不但简单，而且实用性也非常广，主要原理为设置select透明度为0，利用css样式把span美化成select的样式，利用jquery把select选择的option的值传给span。

下面就是jquery优化下拉菜单效果的具体实现代码：

Html

a class="btn-select"

span class="cur-select"请选择/span

select class="form-control"

option这是IE浏览器下的默认显示效果/option

option这是Firefox浏览器下的默认显示效果/option

option这是Opera浏览器下的默认显示效果/option

option这是chrome浏览器下的默认显示效果/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实现下拉菜单

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{ /* 菜单项的右侧小箭头 */ 

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() // 顶级菜单项的鼠标移入操作 

{ 

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

}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作 

{ 

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

}); 

$('#menuulliul li').bind('mouseover',function() // 子菜单的鼠标移入操作 

{ 

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

}).bind('mouseleave',function() // 子菜单的鼠标移出操作 

{ 

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

}); 

});

关于jquery下拉菜单

能啊，一级菜单的每个li中放置一个ul，ul中的每个li下再放置一个ul，这样就三级嵌套了，你只要控制显示隐藏就好了，给三级的显示隐藏封装一个函数，在二级菜单显示的时候调用函数就可以了

jquery 下拉菜单如何做

使用jQuery配合Superfish制作下拉菜单需要具备以下几个参数

1、项目中需要有jQuery版本库；

2、下载Superfish插件——Superfish；

3.需要把上面两个js引入你的项目中

导入jQuery库和Superfish插件

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

为了让菜单一个默认的样式，大家还可以到superfish下载superfish.css样式文件，可以直接调用

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

分享题目：jquery菜单下拉,下拉框和下拉列表
URL标题：http://cdiso.cn/article/dsggeps.html