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 相关文章推荐
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python实现异步IO的示例
2020/11/05 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
高中毕业生自我鉴定
2013/11/03 职场文书
物业电工岗位职责
2013/11/20 职场文书
运动会入场词50字
2014/02/20 职场文书
入党政审材料范文
2014/12/24 职场文书
小学生作文批改评语
2014/12/25 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
python代码实现备忘录案例讲解
2021/07/26 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server