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 相关文章推荐
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 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/08/27 PHP
PHP运行模式的深入理解
2013/06/03 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
《画》教学反思
2014/04/14 职场文书
体育之星事迹材料
2014/05/11 职场文书
中标通知书格式
2015/04/17 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Python字符串格式化方式
2022/04/07 Python
详解PyTorch模型保存与加载
2022/04/28 Python