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实现一个页面多个css样式实现
May 29 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
关于js遍历表格的实例
Jul 10 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 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与已存在的Java应用程序集成
2006/10/09 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php目录拷贝实现方法
2015/07/10 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
nodejs基础知识
2017/02/03 NodeJs
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
vuex的使用步骤
2021/01/06 Vue.js
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
matplotlib绘制动画代码示例
2018/01/02 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python动态文本进度条的实例代码
2020/01/22 Python
python中time、datetime模块的使用
2020/12/14 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
大学生活学习的自我评价
2013/12/03 职场文书
2014年法院工作总结
2014/11/24 职场文书
未中标通知书
2015/04/17 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
vue elementUI批量上传文件
2022/04/26 Vue.js