html导行菜单js效果,JS+CSS实现大气的黑色首页导航菜单效果代码

本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码。分享给大家供大家参考。具体如下:

这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品。

运行效果截图如下:

7c502d2f731c5987a6bd7d2487e798e2.png

在线演示地址如下:

具体代码如下:

/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程序设计有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值