正文
js的二级下拉菜单代码，js的二级下拉菜单代码怎么写
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
jquery实现漂亮的二级下拉菜单代码
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：
这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了
先来看看运行效果：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
titlejQuery二级菜单/title
script
type="text/javascript"
src="jquery-1.6.2.min.js"/script
script
type="text/javascript"
$(document).ready(function(){
$("ul.subnav").parent().append("span/span");
$("ul.topnav
li
span").click(function()
{
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function()
{
},
function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function()
{
$(this).addClass("subhover");
},
function(){
$(this).removeClass("subhover");
});
});
/script
style
type="text/css"
body
{
margin:
0;
padding:
0;
font:
10px
normal
Arial,
Helvetica,
sans-serif;
background:
#ddd
url(images/body_bg.gif)
repeat-x;
}
.container
{
width:
960px;
margin:
auto;
position:
relative;
}
#header
{
padding-top:
120px;
}
#header
.disclaimer
{
color:
#999;
padding:
100px
7px
0;
text-align:
right;
display:
block;
position:
absolute;
top:
0;
right:
0;
}
#header
.disclaimer
a
{
color:
#ccc;}
ul.topnav
{
list-style:
none;
padding:
20px;
margin:
0;
float:
left;
width:
920px;
background:
#222;
font-size:
1.2em;
background:
url(images/topnav_bg.gif)
repeat-x;
}
ul.topnav
li
{
float:
left;
margin:
0;
padding:
15px
0;
position:
relative;
}
ul.topnav
li
a{
padding:
10px
5px;
color:
#fff;
display:
block;
text-decoration:
none;
float:
left;
}
ul.topnav
li
a:hover{
background:
url(images/topnav_hover.gif)
no-repeat
center
top;
}
ul.topnav
li
span
{
width:
17px;
height:
35px;
float:
left;
background:
url(images/subnav_btn.gif)
no-repeat
center
top;
}
ul.topnav
li
span.subhover
{background-position:
center
bottom;
cursor:
pointer;}
ul.topnav
li
ul.subnav
{
list-style:
none;
position:
absolute;
left:
0;
top:
35px;
background:
#333;
margin:
0;
padding:
0;
display:
none;
float:
left;
width:
170px;
-moz-border-radius-bottomleft:
5px;
-moz-border-radius-bottomright:
5px;
-webkit-border-bottom-left-radius:
5px;
-webkit-border-bottom-right-radius:
5px;
border:
1px
solid
#111;
}
ul.topnav
li
ul.subnav
li{
margin:
0;
padding:
0;
border-top:
1px
solid
#252525;
border-bottom:
1px
solid
#444;
clear:
both;
width:
170px;
}
html
ul.topnav
li
ul.subnav
li
a
{
float:
left;
width:
145px;
background:
#333
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
padding-left:
20px;
}
html
ul.topnav
li
ul.subnav
li
a:hover
{
background:
#222
url(images/dropdown_linkbg.gif)
no-repeat
10px
center;
}
#header
img
{
margin:
20px
10px;
}
/style
/head
body
div
class="container"
div
id="header"
ul
class="topnav"
lia
href="#"网站首页/a/li
li
a
href="#"网页菜单/a
ul
class="subnav"
lia
href="#"ASP导航/a/li
lia
href="#"JSP导航/a/li
lia
href="#"ASP.net导航/a/li
lia
href="#"PHP导航/a/li
/ul
/li
li
a
href="#"网页特效/a
ul
class="subnav"
lia
href="#"层和菜单/a/li
lia
href="#"鼠标特效/a/li
lia
href="#"表单特效/a/li
lia
href="#"表格特效/a/li
lia
href="#"CSS特效/a/li
lia
href="#"jQuery特效/a/li
/ul
/li
lia
href="#"搜索引擎/a/li
lia
href="#"博客营销/a/li
lia
href="#"联系我们/a/li
/ul
/div
/div
/body
/html
希望本文所述对大家的jquery程序设计有所帮助。
关于下拉菜单的JS代码
styletype="text/css"
mainMenu{
background-color:FFF;/*Backgroundcolorofmainmenu*/
font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fontsofmainmenuitems*/
font-size:1.2em;/*Fontsizeofmainmenuitems*/
border-bottom:1pxsolid000000;/*Bottomborderofmainmenu*/
height:30px;/*Heightofmainmenu*/
position:relative;/*Don'tchangethispositionattribute*/
visibility:hidden;
}
mainMenua{
padding-left:20px;/*Spacesattheleftofmainmenuitems*/
padding-right:20px;/*Spacesattherightofmainmenuitems*/
font-weight:bold;
/*Don'tchangethesetwooptions*/
position:absolute;
bottom:-1px;
}
submenu{
font-family:TrebuchetMS,LucidaSansUnicode,Arial,sans-serif;/*Fontofsubmenuitems*/
background-color:E2EBED;/*Backgroundcolorofsubmenuitems*/
visibility:hidden;
width:778px;/*Don'tchangethisoption*/
}
htmlbodyclearmenu{/*nonIEbrowsersmenubottomspacing*/
margin-bottom:2px;
}
submenudiv{
white-space:nowrap;/*Don'tchangethisoption*/
}
/*
Styleattributesofactivemenuitem
*/
mainMenu.activeMenuItem{
/*Borderoptions*/
border-left:1pxsolid000000;
border-top:1pxsolid000000;
border-right:1pxsolid000000;
background-color:E2EBED;/*Backgroundcolor*/
cursor:pointer;/*Cursorlikeahandwhentheusermovesthemouseoverthemenuitem*/
}
/*
Styleattributesofinactivemenuitems
*/
mainMenu.inactiveMenuItem{
color:000;/*Textcolor*/
cursor:pointer;/*Cursorlikeahandwhentheusermovesthemouseoverthemenuitem*/
}
submenua{
text-decoration:none;/*Nounderlineonsubmenuitems-usetext-decoration:underline;ifyouwantthelinkstobeunderlined*/
padding-left:5px;/*Spaceattheleftofeachsubmenuitem*/
padding-right:5px;/*Spaceattherightofeachsubmenuitem*/
color:000;/*Textcolor*/
}
submenua:hover{
color:FF0000;/*Redcolorwhentheusermovesthemouseoversubmenuitems*/
}
/style
scripttype="text/javascript"
//morejavascriptfrom/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
functionGet_Cookie(name){
varstart=document.cookie.indexOf(name+"=");
varlen=start+name.length+1;
if((!start)(name!=document.cookie.substring(0,name.length)))returnnull;
if(start==-1)returnnull;
varend=document.cookie.indexOf(";",len);
if(end==-1)end=document.cookie.length;
returnunescape(document.cookie.substring(len,end));
}
//Thisfunctionhasbeenslightlymodified
functionSet_Cookie(name,value,expires,path,domain,secure){
expires=expires*60*60*24*1000;
vartoday=newDate();
varexpires_date=newDate(today.getTime()+(expires));
varcookieString=name+"="+escape(value)+
((expires)?";expires="+expires_date.toGMTString():"")+
((path)?";path="+path:"")+
((domain)?";domain="+domain:"")+
((secure)?";secure":"");
document.cookie=cookieString;
}
functionshowHide()
{
if(activeMenuItem){
activeMenuItem.className='inactiveMenuItem';
vartheId=activeMenuItem.id.replace(/[^d]/g,'');
document.getElementById('submenu_'+theId).style.display='none';
}
activeMenuItem=this;
this.className='activeMenuItem';
vartheId=this.id.replace(/[^d]/g,'');
document.getElementById('submenu_'+theId).style.display='block';
if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index:'+(theId-1),100);
}
}
functioninitMenu()
{
varmainMenuObj=document.getElementById('mainMenu');
varsubMenuObj=document.getElementById('submenu');//DDaddedline
mainMenuObj.style.visibility=subMenuObj.style.visibility="visible"//DDaddedline
varmenuItems=mainMenuObj.getElementsByTagName('A');
if(document.all){
mainMenuObj.style.visibility='hidden';
document.getElementById('submenu').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
varcookieValue=Get_Cookie('dhtmlgoodies_tab_menu_tabIndex')+'';
cookieValue=cookieValue.replace(/[^d]/g,'');
if(cookieValue.length0cookieValuemenuItems.length){
activeTabIndex=cookieValue/1;
}
}
varcurrentLeftPos=15;
for(varno=0;nomenuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick=showHide;elsemenuItems[no].onmouseover=showHide;
menuItems[no].id='mainMenuItem'+(no+1);
menuItems[no].style.left=currentLeftPos+'px';
currentLeftPos=currentLeftPos+menuItems[no].offsetWidth+topMenuSpacer;
if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem=menuItems[no];
}elsemenuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom='-1px';
}
varmainMenuLinks=mainMenuObj.getElementsByTagName('A');
varsubCounter=1;
varparentWidth=mainMenuObj.offsetWidth;
while(document.getElementById('submenu_'+subCounter)){
varsubItem=document.getElementById('submenu_'+subCounter);
if(leftAlignSubItems){
//Noaction
}else{
varleftPos=mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft=leftPos+'px';
subItem.style.position='absolute';
if(subItem.offsetWidthparentWidth){
leftPos=leftPos-Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft=leftPos+'px';
subItem.style.position='static';
}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}
subCounter++;
}
if(document.all){
mainMenuObj.style.visibility='visible';
document.getElementById('submenu').style.visibility='visible';
}
document.getElementById('submenu').style.display='block';
}
window.onload=initMenu;
/script
divid="mainMenu"
a网页特效/a
a插件下载/a
a网络学院/a
a网站联盟/a
/div
divid="submenu"
!--Thefirstsubmenu--
divid="submenu_1"
ahref="javascript.asp?type=图形图像"图形图像/a
ahref="javascript.asp?type=鼠标事件"鼠标事件/a
ahref="javascript.asp?type=时间日期"时间日期/a
ahref="javascript.asp?type=导航菜单"导航菜单/a
ahref="javascript.asp?type=文字效果"文字效果/a
ahref="javascript.asp?type=窗体变化"窗体变化/a
/div
!--Secondsubmenu--
divid="submenu_2"
ahref="plug.asp?type=DreamWeaver插件"DreamWeaver插件/a
ahref="plug.asp?type=FireWork插件"FireWork插件/a
ahref="plug.asp?type=PhotoShop插件"PhotoShop插件/a
ahref="plug.asp?type=FLASH组件"FLASH组件/a
/div
!--Thirdsubmenu--
divid="submenu_3"
ahref="study.asp?type=网页制作"网页制作/a
ahref="study.asp?type=网络编程"网络编程/a
ahref="study.asp?type=图形图像"图形图像/a
ahref="study.asp?type=多媒体制作"多媒体制作/a
ahref="study.asp?type=网站建设"网站建设/a
ahref="study.asp?type=操作系统"操作系统/a
/div
!--Fourthsubmenu--
divid="submenu_4"
ahref="webmeng_show.asp?type=1"网页设计/a
ahref="webmeng_show.asp?type=2"艺术创作/a
ahref="webmeng_show.asp?type=3"电脑网络/a
ahref="webmeng_show.asp?type=4"生活休闲/a
ahref="webmeng_show.asp?type=5"个性展示/a
ahref="webmeng_show.asp?type=6"其它类型/a
/div
/div
brid="clearmenu"/
下拉菜单控制二级下拉菜单显示与隐藏JS代码
联动菜单的实现方法：
1.确定数据格式：
首先，我们介绍一下创建 Option 的语法：
Code:
------------------------------------
var newOption = new Option(optionText, optionvalue);
------------------------------------
根据上面的语法，我们知道 select 选项分 optionText 和 optionvalue 两个内容，optionText 即下拉框中我们看到的选项，而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”，而实际提交的值是 “010”。
为了保持一致，我们确定选项的格式为：
Code:
------------------------------------
{txt:"选项名", val:"选项值"}
------------------------------------
那么一个选项组则是：
Code:
------------------------------------
var childArr = [];
childArr['父选项值1'] = [
{txt:"选项名1", val:"选项值1"},
{txt:"选项名2", val:"选项值2"},
{txt:"选项名3", val:"选项值3"},
...
{txt:"选项名n", val:"选项值n"}
]
childArr['父选项值2'] = [
{txt:"选项名1", val:"选项值1"},
{txt:"选项名2", val:"选项值2"},
{txt:"选项名3", val:"选项值3"},
...
{txt:"选项名n", val:"选项值n"}
]
------------------------------------
其中“父选项值”是父下拉列表选中的值。
注意：[ ] 和 {} 中的值是以“,” (逗号)分隔的，但是最后一个值后面不能有 “,” (逗号)，否则语法错误， PHP 程序员要特别注意 ！！！
2.根据传入的数组创建选项列表：
Code:
------------------------------------
for (var i=0; i len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}
------------------------------------
3.在设置选项之前，我们需要先将原有选项清空：
Code:
------------------------------------
function removeOptions(selectObj)
{
if (typeof selectObj != 'object')
{
selectObj = document.getElementById(selectObj);
}
// 原有选项计数
var len = selectObj.options.length;
for (var i=0; i len; i++)
{
// 移除当前选项
selectObj.options[0] = null;
}
}
------------------------------------
注意，这里不是用 selectObj.options[i] 而是用的 selectObj.options[0] ，由于在 options[0] 删除后，后面的选项就会补上，因此，我们只需要 selectObj.options[0] = null 。
4.设置一个提示选择项和默认选择项：
通常我们在下拉列表中会设置一个提示选择项，如：“请选择城市”，这个选项值为空，作用只是提示用户执行选择操作。
另外，下拉列表也需要能够设置默认选择项，即在页面加载的时候，设置选中状态的项目。
完整代码如下：
-------------------------------------------------------
JS代码：
-------------------------------------------------------
script language="JavaScript" type="text/javascript"
!--
/*
* 说明：将指定下拉列表的选项值清空
* 作者：CodeBit.cn ( )
*
* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
*/
function removeOptions(selectObj) {
if (typeof selectObj != 'object') {
selectObj = document.getElementById(selectObj);
}
// 原有选项计数
var len = selectObj.options.length;
for (var i=0; i len; i++) {
// 移除当前选项
selectObj.options[0] = null;
}
}
/*
* 说明：设置传入的选项值到指定的下拉列表中
* 作者：CodeBit.cn ( )
*
* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须
* @param {Array} optionList 选项值设置 格式：[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ，必须
* @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空
* @param {String} selected 默认选中值，可选
*/
function setSelectOption(selectObj, optionList, firstOption, selected) {
if (typeof selectObj != 'object') {
selectObj = document.getElementById(selectObj);
}
// 清空选项
removeOptions(selectObj);
// 选项计数
var start = 0;
// 如果需要添加第一个选项
if (firstOption) {
selectObj.options[0] = new Option(firstOption, '');
// 选项计数从 1 开始
start ++;
}
var len = optionList.length;
for (var i=0; i len; i++) {
// 设置 option
selectObj.options = new Option(optionList[i].txt, optionList[i].val);
// 选中项
if(selected == optionList[i].val) {
selectObj.options.selected = true;
}
// 计数加 1
start ++;
}
}
//--
/script
-------------------------------------------------------
HTML代码：
-------------------------------------------------------
script language="JavaScript" type="text/javascript"
var cityArr = [];
cityArr['江苏省'] = [
{txt:'南京', val:'南京'},
{txt:'无锡', val:'无锡'},
{txt:'徐州', val:'徐州'},
{txt:'苏州', val:'苏州'},
{txt:'南通', val:'南通'},
{txt:'淮阴', val:'淮阴'},
{txt:'扬州', val:'扬州'},
{txt:'镇江', val:'镇江'},
{txt:'常州', val:'常州'}
];
cityArr['浙江省'] = [
{txt:'杭州', val:'杭州'},
{txt:'宁波', val:'宁波'},
{txt:'温州', val:'温州'},
{txt:'湖州', val:'湖州'}
];
function setCity(province) {
setSelectOption('city', cityArr[province], '-请选择-');
}
/script
select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);"
option value=""-请选择-/option
option value="江苏省"江苏省/option
option value="浙江省"浙江省/option
/select 省
select name="city" id="city"
option value=""-请选择-/option
/select 市
关于js的二级下拉菜单代码和js的二级下拉菜单代码怎么写的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
