JS+CSS实现大气的黑色首页导航菜单效果代码
本文实例讲述了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>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关推荐
-
一步步教大家编写酷炫的导航栏js+css实现
一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>
-
利用Js+Css实现折纸动态导航效果实例源码
先来看看第一种实现方式 效果图如下: 不再采用ul li的布局方式 -webkit-transform-style:preserve-3d只对子元素有作用,所以每个div都加. 实例源码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .wrap{margin:30px auto;widt
-
CSS3+Js实现响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c
-
JS+CSS实现电子商务网站导航模板效果代码
本文实例讲述了JS+CSS实现电子商务网站导航模板效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的电子商务网站导航模板,二级导航菜单,超强美化,超强实用性,分享给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
-
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm
-
JS+CSS实现精美的二级导航效果代码
本文实例讲述了JS+CSS实现精美的二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的.基础js知识技巧的朋友们.其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jm-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE htm
-
仿客齐集首页导航条DIV+CSS+JS [代码实例]
作者子鼠 客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下: 你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分 复制代码 代码如下: <div id="info"> <div
-
JS+CSS实现另类带提示效果的竖向导航菜单
本文实例讲述了JS+CSS实现另类带提示效果的竖向导航菜单.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造另类带提示的竖向导航菜单,觉得挺不错,只是美工水平有限,有兴趣的朋友就请继续完善吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/ 具体代码如下: <html> <head> <title>带提示的竖向导航菜单</title>
-
js+css实现导航效果实例
本文实例讲述了js+css实现导航效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 程序代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lan
-
JS+CSS实现简单的二级下拉导航菜单效果
本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/