如何用CSS实现TAB菜单效果

html-css045

如何用CSS实现TAB菜单效果,第1张

<style type="text/css">

<!--

*{padding:0margin:0}

img{border:0display:block}

BODY {

PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0px autoCOLOR: blackLINE-HEIGHT: 150%PADDING-TOP: 10pxBACKGROUND-COLOR: whiteTEXT-ALIGN: center

}

.dis {

DISPLAY: block

}

.undis {

DISPLAY: none

}

#cntR {

WIDTH: 302px

}

#NewsTop {

CLEAR: bothMARGIN-BOTTOM: 16px

}

#NewsTop P {

FLOAT: leftLINE-HEIGHT: 21px

}

#NewsTop P.topTit {

FONT-WEIGHT: boldWIDTH: 117px

}

#NewsTop P.topC0 {

BACKGROUND: #dcdcdcBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCURSOR: pointer

}

#NewsTop P.topC1 {

BACKGROUND: #c2130eBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCOLOR: #fff

}

#NewsTop #NewsTop_tit {

BORDER-BOTTOM: #c2130e 3px solidHEIGHT: 21px

}

#NewsTop #NewsTop_cnt {

PADDING-LEFT: 32pxBACKGROUND: url(http://www.popuni.com/attachments/month_0703/o2007320133249.gif) no-repeat 12px 13pxLINE-HEIGHT: 26pxPADDING-TOP: 7pxHEIGHT: 260pxTEXT-ALIGN: left

}

#NewsTop #NewsTop_cnt A {

COLOR: #666TEXT-DECORATION: none

}

#NewsTop #NewsTop_cnt A:hover {

COLOR: #c2130eTEXT-DECORATION: underline

}

-->

</style>

<DIV id="cntR" style="float:leftdisplay:blockclear:both">

<DIV id="NewsTop">

<DIV id="NewsTop_tit">

<P class="topTit">新闻排行</P>

<P class="topC0">国内</P>

<P class="topC0">国际</P>

<P class="topC0">社会</P>

<P class="topC0">网评</P>

</DIV>

<DIV id="NewsTop_cnt">

<SPAN title="Don't delete me"></SPAN>

<SPAN>

<A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR>

<div align="right"><A href="#" target=_self>...more</A></div>

</SPAN>

<SPAN>

<A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A><BR>

<div align="right"><A href="#" target=_self>...more</A></div>

</SPAN>

<SPAN>

<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>

<div align="right"><A href="#" target=_self>...more</A></div>

</SPAN>

<SPAN>

<A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A><BR>

<div align="right"><A href="#" target=_self>...more</A></div>

</SPAN>

</DIV>

<SCRIPT>

var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p')

var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span')

var len=Tags.length

var flag=1//修改默认值

for(i=1i<leni++){

Tags[i].value = i

Tags[i].onmouseover=function(){changeNav(this.value)}

TagsCnt[i].className='undis'

}

Tags[flag].className='topC1'

TagsCnt[flag].className='dis'

function changeNav(v){

Tags[flag].className='topC0'

TagsCnt[flag].className='undis'

flag=v

Tags[v].className='topC1'

TagsCnt[v].className='dis'

}

</SCRIPT>

</DIV>

</DIV>

制作下拉菜单有2种方法：

使用jquery方法实现；实现方法：首先需要引入jquery的版本，引用toggle()的方法，点击当前的一级导航。用this方法来进行当前包含的二级菜单隐藏与显示。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

</head>

<style>

*{margin: 0 padding: 0}

ul,li{list-style: none}

a{text-decoration: none}

.menu{width: 1000px margin: 0 auto}

.menu li{float: leftwidth: 100pxline-height: 40px text-align: center}

.menu li a{display: block color:redfont-size: 18px}

.menu-two{display: nonewidth: 100px}

.menu li .menu-two a{font-size: 14pxcolor:#0000FF}

</style>

<body>

<ul class="menu">

<li><a href="#">一级菜单</a>

<ul class="menu-two">

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

</ul>

</li>

<li><a href="#">一级菜单</a>

<ul class="menu-two">

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

<li><a href="#">二级菜单</a></li>

</ul>

</li>

<li><a href="#">一级菜单</a>

<ul class="menu-two">

<li><a href="#">二级菜单</a></li>

</ul>

</li>

<li><a href="#">一级菜单</a>

<ul class="menu-two">

<li><a href="#">二级菜单</a></li>

</ul>

</li>

<li><a href="#">一级菜单</a>

<ul class="menu-two">

<li><a href="#">二级菜单</a></li>

</ul>

</li>

</ul>

</body>

<script type="text/javascript">

$(function(){

$(".menu > li a").toggle(

function(e){

$(this).siblings().show()//对当前的.menu>li a的兄弟节点menu-two进行显示

e.preventDefault()//阻止冒泡事件.

},function(e){

$(this).siblings().hide()对当前的.menu>li a的兄弟节点menu-two进行隐藏

e.preventDefault()

}

)

})

</script>

</html>

2.使用css的伪类样式hover实现，html结构上面的一样，只需要把二级菜单进行隐藏(display:none)然后在用hover方式，鼠标移上去让当前隐藏的（.menu-tow）进行（display:block）显示，纯css的方式：

<style>

*{margin: 0 padding: 0}

ul,li{list-style: none}

a{text-decoration: none}

.menu{width: 1000px margin: 0 auto}

.menu li{float: leftwidth: 100pxline-height: 40px text-align: center}

.menu li a{display: block color:redfont-size: 18px}

.menu-two{display: nonewidth: 100px}/***隐藏当前的二级菜单***/

.menu li .menu-two a{font-size: 14pxcolor:#000}

.menu li:hover .menu-two{display: block}/**鼠标的hover伪类事件对.menu-tow进行显示**/

</style>

3.2种方式都可以实现想要的下拉菜单效果，jquery的实现方式与纯css的实现方式均可以，如果需要有个缓动的动画效果，可以在当前的jquery方式下进行修改，纯css的实现需要用css3的属性来实现。都是很酷炫的（PS：css3的效果只支持ie9及以上）。

@-webkit-keyframes animation2{

from{margin-left:0}

to{margin-left:185pxopacity:1}

}

@-moz-keyframes animation2{

from{margin-left:0}

to{margin-left:185pxopacity:1}

}