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

前端技术 2023/09/04 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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>

希望本文所述对大家的JavaScript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9367

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案