JS实现的简洁二级导航菜单雏形效果

本文实例讲述了JS实现的简洁二级导航菜单" title="导航菜单">导航菜单雏形效果。分享给大家供大家参考。具体如下:

这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/

具体代码如下:

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

<title>二级导航菜单</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

<!--

*{font-size:12px;}

html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}

UL{list-style-type:none; margin:0px;}

.ttl{height:18px;}

.ctt{

height:auto;

padding:6px;

clear:both;

border: 1px solid #CCCCCC;

}

.w936{

width:936px;

clear:both;

height: 120px;

margin-top: 20px;

margin-right: 0;

margin-bottom: 2px;

margin-left: 0;

}

.normaltab {

color:#1F3A87;

}

.hovertab {

color:#FF0000;

background-color: #99CC00;

}

.dis{display:block;}

.undis{display:none;}

.tabs {

width:100%;

background:#BBD9EE;

font-size:93%;

line-height:normal;

}

.tabs ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

.tabs li {

display:inline;

margin:0;

padding:0;

cursor: pointer;

}

.tabs a {

float:left;

background:url("images/tableft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

.tabs a span {

float:left;

display:block;

background:url("images/tabright.gif") no-repeat right top;

padding:5px 15px 4px 6px;

color:#666;

}

.tabs a span {float:none;}

.tabs a:hover span {

color:#FF9834;

}

.tabs a:hover {

background-position:0% -42px;

}

.tabs a:hover span {

background-position:100% -42px;

}

-->

</style>

<script type="text/javascript" language="javascript">

<!--

function g(o){return document.getElementById(o);}

function HoverLi(n)

{

for(var i=1;i<=8;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}

g('tbc_0'+n).className='dis';g('tb_'+n);

}

//-->

</script>

</head>

<body>

<div class="w936">

<div id="tb_" class="tb_ tabs">

<ul>

<li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>ASP</span></a></li>

<li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>PHP</span></a></li>

<li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>.NET</span></a></li>

<li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>JSP</span></a></li>

<li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>JAVA</span></a></li>

<li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>DELPHI</span></a></li>

<li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>VC++</span></a></li>

<li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>AJAX</span></a></li>

</ul>

</div>

<div class="ctt">

<div class="dis" id="tbc_01">ASP的内容一</div>

<div class="undis" id="tbc_02">PHP的内容二</div>

<div class="undis" id="tbc_03">.NET的内容三</div>

<div class="undis" id="tbc_04">JSP的内容四</div>

<div class="undis" id="tbc_05">JAVA的内容五</div>

<div class="undis" id="tbc_06">DELPHI的内容六</div>

<div class="undis" id="tbc_07">VC++的内容七</div>

<div class="undis" id="tbc_08">AJAX的内容</div>

</div>

</div>

</body>

</html>

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

以上是 JS实现的简洁二级导航菜单雏形效果 的全部内容, 来源链接: utcz.com/z/320720.html

回到顶部