网站导航菜单代码（导航栏代码）
本文目录一览：
简单的网页导航条代码
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlenone/title
style type="text/css"
!--
body { margin: 0px;padding: 0px;text-align: center;}
TD {FONT-SIZE: 12px; COLOR: #333;}
#toubiao {BORDER-BOTTOM: #e2e2e2 1px solid;}
--
/style
/head
body
SCRIPT
function toueme(){
document.getElementById("toubiao").style.display="none";
}
/SCRIPT
DIV id=toubiao
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td width="4%" height="30" align="center"img src="images/kids.gif" width="15" height="14"/td
td width="82%"登陆|注册 这里要什么就你自己写咯/td
td width="14%" align="right"a style="CURSOR: hand" onClick=toueme()关闭/a/td
/tr
/table
/DIV
呵呵 新建记事本 打开复制该代码 保存 修改后缀名为html 预览效果！
/body
/html
jQuery实现两款有动画功能的导航菜单代码
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：
这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title两个有动画功能的导航菜单/title
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function()
{
$("#test1
a").mouseover(function()
{
var
index
=
$("#test1
a").index(this);
var
width
=
$("#test1
a").width();
$("#test1
.showhover").stop().animate({left:width*index},1000);
})
$("#test2
a").mouseover(function()
{
var
index
=
$("#test2
a").index(this);
var
width
=
$("#test2
a").width();
$("#test2
.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
})
})
/script
style
type="text/css"
.body
{margin:10px;}
img
{border:0;}
a
{text-decoration:none;}
ul{list-style:none;
margin:0;
padding:0;}
.menu
{background:#003399;
height:25px;
width:600px;
position:relative;
overflow:hidden;}
.menu
.showmenu,
.menu
.showhover{
position:absolute;}
.menu
.showmenu
a
{float:left;
display:block;}
.menu
.showmenu
a
{font:700
12px/25px
Microsoft
YaHei;
color:#fff;
width:100px;
height:25px;
text-align:center;}
.menu
.showhover
{background:#990033;
width:100px;
height:25px;}
/style
/head
body
div
class="2e84-e643-0fbb-dd93 menu"
id="test1"
div
class="e643-0fbb-dd93-6e17 showhover"/div
div
class="0fbb-dd93-6e17-861a showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
div
style="clear:both;height:50px;"/div
div
class="dd93-6e17-861a-ccd6 menu"
id="test2"
div
class="6e17-861a-ccd6-a4d2 showhover"/div
div
class="861a-ccd6-a4d2-0f27 showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
网站导航栏特效代码！
代码如下 也就是我的网站的导航栏你可以去看看
STYLE type=text/css
/**/
body{ font-size:12px; text-align:center; margin-top:30px; font-family:Verdana;}
div,img{margin:0; padding:0; border:0;}
ul,li{list-style-type: none; margin:0; padding:0; float:left; }
#info{ margin-left:auto; margin-right:auto;width:790px; text-align:left;}
#new{ margin-top:-12px;position: absolute;margin-left:-12px;}
#nav{ height:30px; width:778px; margin-left:auto; margin-right:auto;}
#nav li{margin-left:1px; height:30px;}
#nav li a{ display:block;float:left; text-decoration:none; background-image: url();background-repeat: no-repeat; display:block; background-position:left top;}
#nav a span{cursor:hand; color:#000;background-image: url();background-repeat: no-repeat; display:block;background-position: right top; padding:7px 10px 6px 10px; float:left; }
#nav li a:active,#nav li a:hover {margin-top:0px; }
#nav li a:active span,#nav li a:hover span {padding:10px 10px 6px 10px; margin-top:0px; display:block; color:#FFF;}
#zishu01 a:link,#zishu01 a:visited {background-position: 0px -27px;}
#zishu01 a:link span,#zishu01 a:visited span{background-position:right -27px;padding:10px 10px 6px 10px; margin-top:0; color:#FFF; font-weight:bold;}
#zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px;}
#zishu02 a:active,#zishu02 a:hover {background-position: 0px -87px;}
#zishu02 a:active span,#zishu02 a:hover span{background-position:right -57px;}
#zishu03 a:active,#zishu03 a:hover {background-position: 0px -117px;}
#zishu03 a:active span,#zishu03 a:hover span{background-position:right -87px;}
#zishu04 a:active,#zishu04 a:hover {background-position: 0px -147px;}
#zishu04 a:active span,#zishu04 a:hover span{background-position:right -117px;}
#zishu05 a:active,#zishu05 a:hover {background-position: 0px -177px;}
#zishu05 a:active span,#zishu05 a:hover span{background-position:right -147px;}
#zishu06 a:active,#zishu06 a:hover {background-position: 0px -107px;}
#zishu06 a:active span,#zishu06 a:hover span{background-position:right -177px;}
#zishu07 a:active,#zishu07 a:hover {background-position: 0px -237px;}
#zishu07 a:active span,#zishu07 a:hover span{background-position:right -207px;}
#zishu08 a:active,#zishu08 a:hover {background-position: 0px -267px;}
#zishu08 a:active span,#zishu08 a:hover span{background-position:right -237px;}
#zishu09 a:active,#zishu09 a:hover {background-position: 0px -297px;}
#zishu09 a:active span,#zishu09 a:hover span{background-position:right -267px;}
#zishu10 a:active,#zishu10 a:hover {background-position: 0px -317px;}
#zishu10 a:active span,#zishu10 a:hover span{background-position:right -297px;}
#zishu11 a:link span,#zishu11 a:visited span{color:#FF6600;}
#zishu11 a:active,#zishu11 a:hover {background-position: 0px -347px;}
#zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}
#menu{ width:750px; height:8px; background:#FF9900;}
#r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}
#r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}
#r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}
/**/
/STYLE
TABLE style="Z-INDEX: 100; LEFT: 115px; POSITION: absolute; TOP: 0px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: transparent" cellPadding=0 width="100%" border=0
TBODY
TR
TD align=middle
DIV id=info
DIV id=nav
UL
LI id=zishu01A href=""SPANswell的首页/SPAN/A /LI
LI id=zishu02A href=""SPAN博客首页美化/SPAN/A /LI
LI id=zishu03A href=""SPAN博客插件添加/SPAN/A /LI
LI id=zishu04A href=""SPAN博客鼠标美化/SPAN/A /LI
LI id=zishu08A href=""SPAN博客综合特效/SPAN/A /LI
LI id=zishu05A href=""SPAN新浪博客/SPAN/A /LI
LI id=zishu06A href=""SPAN酷虫博客圈/SPAN/A /LI
LI id=zishu07A href=""SPAN给我留言/SPAN/A /LI
LI id=zishu08A href=""SPAN博客推广/SPAN/A /LI
LI
DIV id=newIMG alt=重点推荐 src=""/IMG/DIV/LI/UL/DIV
DIV id=menu
DIV id=r1/DIV
DIV id=r2/DIV
DIV id=r3/DIV/DIV/DIV/TD/TR/TBODY/TABLE
求导航下拉菜单代码
html xmlns="" lang="zh-CN"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title下拉菜单演示/title
style type="text/css"
!--
*{margin:0px; padding:0px;}
body {font-family: arial, 宋体, serif;font-size:12px;}
#nav {line-height: 24px; list-style-type: none; background:#666; }
#nav a {display: block; width: 80px; text-align:center;}
#nav a:link {color:#666; text-decoration:none;}
#nav a:visited {color:#666;text-decoration:none;}
#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}
#nav li {float: left; width: 80px; background:#CCC;}
#nav li a:hover{background:#999;}
#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}
#nav li ul li{float: left;background: #F6F6F6;}
#nav li ul a{display: block; width: 156px;text-align:left;padding-left:24px;}
#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
--
/style
script type=text/javascript!--//--![CDATA[//!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; isfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--!]]/script
/head
body
ul id="nav"
lia href=""产品介绍一/a
ul
lia href=""产品一/a/li
lia href=""产品一/a/li
lia href=""产品一/a/li
lia href=""产品一/a/li
lia href=""产品一/a/li
lia href=""产品一/a/li
/ul
/li
lia href=""产品介绍二/a
ul
lia href=""产品二/a/li
lia href=""产品二/a/li
lia href=""产品二/a/li
lia href=""产品二/a/li
lia href=""产品二/a/li
/ul
/li
/ul
/body
/html
