<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0049)http://www.jsfoot.com/js/demo/2012-03-15/431.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>js导航菜单制作一个类似选项卡的红色二级导航菜单|jsfoot 网页特效</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META name=keywords content=js导航菜单制作一个类似选项卡的红色二级导航菜单>
<META name=description content=jquery特效,js特效,flash特效,div+css教程,html5教程>
<META name=GENERATOR content="MSHTML 8.00.6001.19400"></HEAD>
<BODY>
<SCRIPT type=text/javascript>
//屏蔽右键菜单
document.oncontextmenu = function (event){
if(window.event){
event = window.event;
}try{
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")){
return false;
}
return true;
}catch (e){
return false;
}
}
</SCRIPT>
<DIV class=shortcut>
<H1><A
href="http://www.jsfoot.com/js/menu/xl/2012-03-15/430.html">js导航菜单制作一个类似选项卡的红色二级导航菜单</A></H1><SPAN
class=right><A
href="http://www.jsfoot.com/js/menu/xl/2012-03-15/430.html"><STRONG>下载特效</STRONG>
</A></SPAN>
<DIV class=clr></DIV></DIV><!--/ Codrops top bar -->
<DIV class=headeline></DIV><!--演示内容开始-->
<STYLE type=text/css>* {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
A {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
BODY {
FONT-FAMILY: Tahoma, Verdana, Arial, sans-serif; COLOR: #333333; FONT-SIZE: 12px
}
A {
COLOR: #333333; TEXT-DECORATION: none
}
A:hover {
COLOR: #ff0000; TEXT-DECORATION: none
}
#menu {
BACKGROUND-COLOR: #990000; MARGIN-TOP: 8px; HEIGHT: 32px
}
#menu UL {
MARGIN: 0px auto; WIDTH: 778px; HEIGHT: 32px
}
#menu .m_li {
TEXT-ALIGN: center; LINE-HEIGHT: 32px; MARGIN: 0px -2px; WIDTH: 114px; FLOAT: left
}
#menu .m_li A {
WIDTH: 114px; DISPLAY: block; COLOR: #ffffff
}
#menu .m_line {
LINE-HEIGHT: 32px; WIDTH: 1px; FLOAT: left; HEIGHT: 32px
}
#menu .m_line IMG {
}
#menu .m_li_a {
POSITION: relative; TEXT-ALIGN: center; LINE-HEIGHT: 32px; MARGIN: -3px -2px 0px; WIDTH: 114px; BACKGROUND: url(menu/menu_bg.jpg); FLOAT: left; HEIGHT: 32px; FONT-WEIGHT: bold; PADDING-TOP: 3px
}
#menu .m_li_a A {
WIDTH: 114px; DISPLAY: block; COLOR: #ff0000
}
.subbox {
BACKGROUND-COLOR: #f1f1f1; HEIGHT: 32px
}
.subbox .smenu {
MARGIN: 0px auto; WIDTH: 774px; HEIGHT: 32px
}
.subbox LI {
LINE-HEIGHT: 32px; HEIGHT: 32px
}
.subbox .s_li {
DISPLAY: none
}
.subbox .s_li_a {
DISPLAY: block
}
</STYLE>
<SCRIPT type=text/javascript>
//设置当前频道
var def="1";
function mover(object){
//主菜单
var mm=document.getElementById("m_"+object);
mm.className="m_li_a";
//初始主菜单先隐藏效果
if(def!=0){
var mdef=document.getElementById("m_"+def);
mdef.className="m_li";
}
//子菜单
var ss=document.getElementById("s_"+object);
ss.style.display="block";
//初始子菜单先隐藏效果
if(def!=0){
var sdef=document.getElementById("s_"+def);
sdef.style.display="none";
}
}
function mout(object){
//主菜单
var mm=document.getElementById("m_"+object);
mm.className="m_li";
//初始主菜单还原效果
if(def!=0){
var mdef=document.getElementById("m_"+def);
mdef.className="m_li_a";
}
//子菜单
var ss=document.getElementById("s_"+object);
ss.style.display="none";
//初始子菜单还原效果
if(def!=0){
var sdef=document.getElementById("s_"+def);
sdef.style.display="block";
}
}
</SCRIPT>
<DIV id=menu>
<UL>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_1 class=m_li_a><A href="#">首页</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_2 class=m_li onmouseover=mover(2); onmouseout=mout(2);><A
href="#">jquery 特效</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_3 class=m_li onmouseover=mover(3); onmouseout=mout(3);><A
href="http://www.jsfoot.com/js/">javascript特效</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_4 class=m_li onmouseover=mover(4); onmouseout=mout(4);><A
href="http://www.jsfoot.com/flash/">flash特效</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_5 class=m_li onmouseover=mover(5); onmouseout=mout(5);><A
href="http://www.jsfoot.com/css3/">div+css教程</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_6 class=m_li onmouseover=mover(6); onmouseout=mout(6);><A
href="http://www.jsfoot.com/html5/">html5教程</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI>
<LI id=m_7 class=m_li onmouseover=mover(7); onmouseout=mout(7);><A
href="http://www.jsfoot.com/html5/">html7333</A></LI>
<LI class=m_line><IMG
src="menu/line1.gif"></LI></UL></DIV><!--menu end-->
<DIV class=subbox>
<UL class=smenu>
<LI style="PADDING-LEFT: 29px" id=s_1 class=s_li_a>jsfoot 网页特效主要有jquery 特效
js特效 flash特效 div+css教程 html5教程</LI>
<LI style="PADDING-LEFT: 141px" id=s_2 class=s_li onmouseover=mover(2);
onmouseout=mout(2);><A title=jquery图片特效
href="http://www.jsfoot.com/jquery/menu/"
target=_blank>jquery图片特效</A> | <A title=jquery导航菜单
href="http://www.jsfoot.com/jquery/menu/"
target=_blank>jquery导航菜单</A> | <A title=jquery选项卡特效
href="http://www.jsfoot.com/jquery/xxk/"
target=_blank>jquery选项卡特效</A> | <A title=jquery文字特效
href="http://www.jsfoot.com/jquery/letter/"
target=_blank>jquery文字特效</A> | <A title=jquery表单特效
href="http://www.jsfoot.com/jquery/form/"
target=_blank>jquery表单特效</A> | <A title=jquery表格特效
href="http://www.jsfoot.com/jquery/table/" target=_blank>jquery表格特效</A> </LI>
<LI style="PADDING-LEFT: 252px" id=s_3 class=s_li onmouseover=mover(3);
onmouseout=mout(3);><A title=js图片特效 href="http://www.jsfoot.com/js/menu/"
target=_blank>js图片特效</A> | <A title=js导航菜单
href="http://www.jsfoot.com/js/menu/"
target=_blank>js导航菜单</A> | <A title=js选项卡特效
href="http://www.jsfoot.com/js/xxk/"
target=_blank>js选项卡特效</A> | <A title=js文字特效
href="http://www.jsfoot.com/js/letter/"
target=_blank>js文字特效</A> | <A title=js表单特效
href="http://www.jsfoot.com/js/form/"
target=_blank>js表单特效</A> | <A title=js表格特效
href="http://www.jsfoot.com/js/table/" target=_blank>js表格特效</A> </LI>
<LI style="PADDING-LEFT: 362px" id=s_4 class=s_li onmouseover=mover(4);
onmouseout=mout(4);><A title=flash图片特效
href="http://www.jsfoot.com/flash/menu/"
target=_blank>flash图片特效</A> | <A title=flash导航菜单
href="http://www.jsfoot.com/flash/menu/"
target=_blank>flash导航菜单</A> | <A title=flash文字特效
href="http://www.jsfoot.com/flash/letter/" target=_blank>flash文字特效</A> </LI>
<LI style="PADDING-LEFT: 474px" id=s_5 class=s_li onmouseover=mover(5);
onmouseout=mout(5);><A title=div+css布局
href="http://www.jsfoot.com/css3/layout/"
target=_blank>div+css布局</A> | <A title=div+css菜单
href="http://www.jsfoot.com/css3/menu/"
target=_blank>div+css菜单</A> | <A title=css3教程
href="http://www.jsfoot.com/css3/css3/" target=_blank>css3教程</A> </LI>
<LI style="PADDING-LEFT: 407px" id=s_6 class=s_li onmouseover=mover(6);
onmouseout=mout(6);><A title=html5特效 href="http://www.jsfoo
js导航菜单横向二级菜单
5星 · 超过95%的资源 需积分: 27 87 浏览量
2013-03-03
19:29:32
上传
评论
收藏 32KB RAR 举报 
js导航菜单横向定位.rar （6个子文件） 
js导航菜单横向定位 
js.htm 8KB menu menu_style.css 4KB
menu_bg.jpg 2KB jquery.1.4.2-min.js 78KB Thumbs.db 4KB
line1.gif 46B
- 1
- 2
前往页