JS+CSS实现大气的黑色首页导航菜单效果代码
更新时间：2015年09月10日 12:19:39 作者：企鹅
这篇文章主要介绍了JS+CSS实现大气的黑色首页导航菜单效果代码,涉及JavaScript基于鼠标事件实现页面样式动态切换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码。分享给大家供大家参考。具体如下：
这是一款JS+CSS实现的大气的重色+红色高强对比的菜单，可用作首页导航菜单，从设计的角度来讲，挺专业，从实用角度来讲，应用广泛，是款人见人爱的经典风格菜单，超不错的一个作品。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>大气的黑色CSS首页导航菜单</title>
<style>
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;}
</style>
<script type="text/javascript">
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="";
}
}
}
</script>
</head>
<body style="text-align:center">
<div id=menu_out>
<div id=menu_in>
<div id=menu>
<UL id=nav>
<li><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="#"><SPAN>网站首页</SPAN></A></li>
<li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>网站模板</span></a></li>
<li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>后台模板</span></a></li>
<li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>CSS菜单</span></a></li>
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>脚本下载</span></a></li>
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>网页特效</span></a></li>
<li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>新闻中心</span></a></li>
<li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>联系我们</span></a></li>
</UL>
<div id=menu_con>
<div id=qh_con0 style="DISPLAY: block"></div>
<div id=qh_con1 style="DISPLAY: none"></div>
<div id=qh_con2 style="DISPLAY: none"></div>
<div id=qh_con3 style="DISPLAY: none"></div>
<div id=qh_con4 style="DISPLAY: none"></div>
<div id=qh_con5 style="DISPLAY: none"></div>
<div id=qh_con6 style="DISPLAY: none"></div>
<div id=qh_con7 style="DISPLAY: none"></div>
</div>
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关文章
这篇文章主要是对判断javascript的数据类型(示例代码)进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了Bootstrap学习笔记之标签基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12![innerText innerHTML的用法以及注意事项 [推荐]](//img.jbzj.com/images/xgimg/bcimg2.png)
innerText innerHTML的用法以及注意事项 [推荐]
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。2009-05-05
这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
下面的章节描述的是一个 合理 的现代 JavaScript 开发风格指南，并非硬性规定。其想送出的核心理念是高度统一的代码风格（the law of code style consistency）。2014-05-05
这篇文章主要介绍了js实现向右横向滑出的二级菜单效果,涉及javascript鼠标事件及页面元素的隐藏与显示实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文通过实例代码给大家分享基于javascript实现的验证码功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
点小图看大图的效果想必很多的朋友都有见到过吧，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用）。下面这篇文章主要介绍了利用iscroll4实现轮播图效果的方法教程,需要的朋友可以参考下。2017-01-01
这篇文章主要介绍了微信小程序如何设置基本的页面样式，做出用户界面UI。如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。2022-12-12
![innerText innerHTML的用法以及注意事项 [推荐]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论