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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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实现MySQL更新记录的代码
2008/06/07 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
ThinkPHP之getField详解
2014/06/20 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP6新特性分析
2016/03/03 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
Python with用法实例
2015/04/14 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python ansible服务及剧本编写
2017/12/29 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
捐款倡议书
2014/04/14 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
三年级学生期末评语
2014/12/26 职场文书
拔河比赛新闻稿
2015/07/17 职场文书