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


Posted in Javascript onSeptember 10, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
FireFox中textNode分片的问题
Apr 10 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 #Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 #Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 #Javascript
js实现的动画导航菜单效果代码
Sep 10 #Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 #Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
You might like
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php通过session防url攻击方法
2014/12/10 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简单的python后台管理程序
2017/04/13 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
django 环境变量配置过程详解
2019/08/06 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
什么是继承
2013/12/07 面试题
行政求职信
2014/07/04 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
入伍通知书
2015/04/23 职场文书
小学毕业感言200字
2015/07/30 职场文书
医院消毒隔离制度
2015/08/05 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL