本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款JS+CSS实现的大气的重色+红色高强对比的菜单，可用作首页导航菜单，从设计的角度来讲，挺专业，从实用角度来讲，应用广泛，是款人见人爱的经典风格菜单，超不错的一个作品。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
大气的黑色CSS首页导航菜单body,div,form,ul,li,span{margin:0;padding:0; list-style-type:none;}
body {text-align:center;color:#444;font-family:"宋体";font-size:12px; background:url(images/bodybg.jpg) top repeat-x;}
img {border:0px;}
.ml12{margin-left:12px; display:inline}
a,a:Link,a:visited{font-size:12px;color:#444; text-decoration:none}
a:hover{color:#FF3300; text-decoration:underline;}
.nav{width:1000px;float:left}
.nav ul{width:1000px;float:left;}
.nav li{width:100px;float:left; height:38px; line-height:38px;margin-right:20px; display:inline;}
.nav li a:link,.nav li a:visited{color:#E4E4E4;font-size:14px;font-weight:bold;}
.nav li a:hover{ text-decoration:none;width:100px;float:left; height:38px; line-height:38px; background:url(images/home-bg.jpg)}
/*主导航菜单*/
#menu ul{
padding:0;
border:0;
list-style:none;
line-height:38px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
float:left;
}
#menu_out{
width:1000px;float:left;
margin-top:107px;
padding-left:3px;
margin-left:auto;
margin-right:auto;
height:38px; overflow:hidden;
}
#menu_in{
padding-right:4px;
}
#menu{
height:38px;
}
#nav{
padding-left:20px;
}
#nav li{
float:left;
height:38px;
margin-left:5px;margin-right:5px;
}
#nav li a{
float:left;
display:block;
padding-left:6px;
height:38px;
cursor:pointer;
text-decoration:none;
text-align:center;
}
#nav li a span{
float:left; width:100px;
line-height:38px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}
#nav li .nav_on{ /*鼠标经过时变换背景，方便JS获取样式*/
background-position:left 100%;
}
#nav li .nav_on span{ /*鼠标经过时变换背景，方便JS获取样式*/
background-position:right 100%;
color:#fff;
text-decoration:none;
width:100px;background:url(images/home-bg.jpg) no-repeat;
}
.nav-bot{width:1000px;float:left; height:20px;overflow:hidden; line-height:20px; padding-top:12px; padding-bottom:10px;}
.nav-botinfo{width:680px;background:url(images/ico01.jpg) no-repeat left;text-align:left;padding-left:20px;margin-left:10px; display:inline;color:#9F9F9F;}
function qiehuan(num){
for(var id = 0;id<=7;id++)
{
if(id==num)
{
document.getElementById("qh_con"+id).style.display="block";
document.getElementById("mynav"+id).className="nav_on";
}
else
{
document.getElementById("qh_con"+id).style.display="none";
document.getElementById("mynav"+id).className="";
}
}
}
希望本文所述对大家的JavaScript程序设计有所帮助。
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
