JS CSS实现大气的黑色首页导航菜单效果代码_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

PHP中文网

May 16, 2016 pm 03:39 PM

cssjavascript导航菜单

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/

具体代码如下：

<!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>

以上就是JS CSS实现大气的黑色首页导航菜单效果代码_javascript技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。