存档

文章标签 ‘css’

css二级导航效果[javascript+div+css实现]

2013年5月18日 没有评论

分享一个css二级导航效果,用javascript和div+css实现的,当然,我们可以完全使用div+css实现。

我用javascript和div+css实现的目的是多样化而已,没什么意义,实际上用纯div+css实现css二级导航效果更理想,更兼容。

下面公布css二级导航效果的源代码,希望对你有用:

<!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=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>

/*这里是css代码,简单看下就明白了*/
* {padding:0px;margin:0px;font-size:24px;}
li {list-style:none;}
.navul {width:1000px;margin:0px auto;margin-top:100px;}
.navul li {width:180px;text-align:center;height:44px;line-height:44px;background:red;float:left;margin-left:1px;cursor:pointer;}
.navul li a {color:#fff;display:block;width:100%;height:100%;}
.sunnav {width:1000px;margin:0px auto;position:relative;}
.sunnav ul {position:absolute;top:0px;width:180px;display:none;}
.sunnav ul li {text-align:center;height:30px;line-height:30px;}

.sunnav ul li a {font-size:14px;}
.cl {clear:both;}
#sunnav1 {left:180px;}
#sunnav2 {left:360px;}
#sunnav3 {left:540px;}
</style>
<script type=”text/javascript”>

//这里是javascript代码,如果你是新手,你可能需要研究下,要不然你可能不懂css二级导航效果实现的原理。
function $id(id){return document.getElementById(id);}
function showsun(n){
for(i=1;i<=3;i++){
$id(“sunnav”+i).style.display=’none’;
$id(“praentli”+i).style.background=’red’;
}
$id(“sunnav”+n).style.display=’block’;
$id(“praentli”+n).style.background=’blue’;
}
function realclosesun(){
$id(“sunnav”+nowoutN).style.display=’none’;
$id(“praentli”+nowoutN).style.background=’red’;
}
var nowoutN=0;
var realclosesunTimer;
function closesun(n){
nowoutN=n;
realclosesunTimer=setTimeout(“realclosesun()”,100);
}
function clearRealclosesunTimer(){
clearTimeout(realclosesunTimer);
showsun(nowoutN);
}
</script>
</head>

<body>
<ul>
<li><a href=””>首页</a></li>
<li id=”praentli1″><a onmouseover=”showsun(1)” onmouseout=”closesun(1)” href=””>css导航_父1</a></li>
<li id=”praentli2″><a onmouseover=”showsun(2)” onmouseout=”closesun(2)” href=””>css导航_父2</a></li>
<li id=”praentli3″><a onmouseover=”showsun(3)” onmouseout=”closesun(3)” href=””>css导航_父3</a></li>
</ul>
<p></p>
<div>
<ul id=”sunnav1″ onmouseover=”clearRealclosesunTimer()” onmouseout=”realclosesun()”>
<li><a href=””>css导航_子1_1</a></li>
<li><a href=””>css导航_子1_2</a></li>
<li><a href=””>css导航_子1_3</a></li>
</ul>
<ul id=”sunnav2″ onmouseover=”clearRealclosesunTimer()” onmouseout=”realclosesun()”>
<li><a href=””>css导航_子2_1</a></li>
<li><a href=””>css导航_子3_2</a></li>
<li><a href=””>css导航_子3_3</a></li>
</ul>
<ul id=”sunnav3″ onmouseover=”clearRealclosesunTimer()” onmouseout=”realclosesun()”>
<li><a href=””>css导航_子3_1</a></li>
<li><a href=””>css导航_子3_2</a></li>
</ul>
</div>
</body>
</html>

css和div+javascript实现的css二级导航效果就完整实现了,经测试,完整兼容ie6,ie7,ie8,ie9,ff+,chrome+

仿2005年淘宝导航条div+css效果

2013年5月12日 没有评论

首先,我们需要以下css文件:

*{margin:0px;padding:0px}

body{text-align:center;font-size:12px}

#nav{width:700px;margin:auto;margin-top:50px}

#nav ul li{list-style:none;margin-left:1px;float:left}

#nav ul li a{display:block;text-decoration:none;background:url(left.gif) no-repeat left top;margin-top:3px}

#nav ul li a:hover{margin-top:0px}

#nav ul li a:hover div{padding:6px 10px 9px 10px}

#nav ul li a div{background:url(right.gif) no-repeat right top;padding:6px 10px}

#nav #lian01 a{margin-top:0px;background-position:left -27px}

#nav #lian01 a div{padding:6px 10px 9px 10px;background-position:right -27px}

#nav #lian02 a:hover{background-position:left -57px}

#nav #lian02 a:hover div{background-position:right -57px}

#nav #lian03 a:hover{background-position:left -87px}

#nav #lian03 a:hover div{background-position:right -87px}

#nav #lian04 a:hover{background-position:left -117px}

#nav #lian04 a:hover div{background-position:right -117px}

#nav #lian05 a:hover{background-position:left -147px}

#nav #lian05 a:hover div{background-position:right -147px}

#nav #lian06 a:hover{background-position:left -177px}

#nav #lian06 a:hover div{background-position:right -177px}

#nav #lian07 a:hover{background-position:left -207px}

#nav #lian07 a:hover div{background-position:right -207px}

#nav #lian08 a:hover{background-position:left -237px}

#nav #lian08 a:hover div{background-position:right -237px}

#nav #lian09 a:hover{background-position:left -267px}

#nav #lian09 a:hover div{background-position:right -267px}

#nav #lian10 a:hover{background-position:left -297px}

#nav #lian10 a:hover div{background-position:right -297px}

#nav #lian11 a:hover{background-position:left -327px}

#nav #lian11 a:hover div{background-position:right -327px}

再次,我们需要以下html源代码:

<link href=”css.css” rel=”stylesheet” />
<div id=”nav”>
<ul>
<li id=”lian01″><a href=”http://www.baidu.com”><div>首页</div></a></li>
<li id=”lian02″><a href=”#”><div>数码通讯</div></a></li>
<li id=”lian03″><a href=”#”><div>女人</div></a></li>
<li id=”lian04″><a href=”#”><div>男人</div></a></li>
<li id=”lian05″><a href=”#”><div>家居</div></a></li>
<li id=”lian06″><a href=”#”><div>书籍音像</div></a></li>
<li id=”lian07″><a href=”#”><div>运动</div></a></li>
<li id=”lian08″><a href=”#”><div>游戏</div></a></li>
<li id=”lian09″><a href=”#”><div>宠物</div></a></li>
<li id=”lian10″><a href=”#”><div>香港街</div></a></li>
<li id=”lian11″><a href=”#”><div>淘宝商城</div></a></li>
<li id=”lian12″><div id=”new”><img src=”new.gif” alt=”新加栏目”></div></li>
</ul>
</div>

还有,我们需要以下2张图片作为附件:

淘宝导航条效果,左侧图片

淘宝导航条效果,左侧图片

淘宝导航条效果,右侧图片

淘宝导航条效果,右侧图片

这样,完整的仿2005年淘宝导航条div+css效果就完成了,当然别忘记了在html中加入文件头声明。在这里只是记忆,留个记号。

分类: div+css学习 标签: , , , ,
css.php