首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS+div:上拉菜单详解

2012-11-10 
CSS+div:下拉菜单详解之前由于没有用到下拉菜单,一直没去实践(只在刚学建站时用DW做了一个,无代码亲自操作

CSS+div:下拉菜单详解

之前由于没有用到下拉菜单,一直没去实践(只在刚学建站时用DW做了一个,无代码亲自操作经历),今天终于抽出时间做了一个下拉菜单,IE6、IE7、/FF下通用不变形,其实这个很基础,但对于往标准化转变有很好的促进作用。

先把关键点和思路摘录一下:

1、结构布局:
在菜单版块上,下拉的菜单也是放在UL中,但必需要嵌套在其父级的LI中,如下

<div id=”nav”>
<ul id=”nav_top”>
<li id=”nav_index”><a href=”/”>首页</a></li>
<li><a href=”#”>CSS专栏</a>
<ul>
<li><a href=”#”>CSS基础</a></li>

?

<li><a href=”#”>CSS常用代码</a></li>
<li><a href=”#”>CSS高级技术</a></li>
</ul>

</li>
… …

</div>

在这样的结构中,上层的DIV等标签不能用overflow:hidden; ,否则下拉菜单会出不来。我清晰的记得,刚学DW建站的第一个月,就用DW做了一个下拉菜单,但现在回去去看,那个更多依靠是的JS,有时定位不准会产生下拉菜单跑位。
而这样嵌套后,一会通过定位,就不会偏移。在实际应用时,nav可以加入LOGO等内容,而nav_top才是用于控制菜单。

2、样式继承:
由于在CSS中的组合选择符,会对其下的同样子标签会赋予同样的样式特征,因此,当我们对第一层的UL和LI定义时,下拉部分也会被带上同样的样式,先不管这个,最后再去修正下拉部分的UL和LI。

A、第一层样式定义:
body {
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav {
… …/* 略 */
width:800px;
margin:0 auto;
}
#nav ul {
… …
}
#nav ul li {
float: left;
}
#nav ul li a {
… …
}
#nav ul li a:hover {
… …
}

B、父层LI的相对定位:
接着最关键就是定义:#nav ul li {position:relative;}把第一层的LI定义成相对定位后,下拉菜单的绝对定位就不会偏移,而以其上层的LI做为参照,此外,需要对下拉菜单的列表做2项工作:
第一项:设置下拉列表的UL不显示:#nav ul li ul 设为display:none。以及绝对定位position:absolute; left:3px; top:24px; 。
第二项:对下拉列表的LI浮动进行清除#nav ul li ul li 设为float:none;如果不清除也可以,但下拉列表的UL要设置宽度width:99px;,
当不设置此宽度也不清除浮动继承时,下拉菜单就变成横向出向,如果你需要这种下拉效果,就不清除吧,如下图:

CSS+div:上拉菜单详解

#nav ul li {position:relative;}
#nav ul li ul {display:none;margin:0;padding:0; position:absolute; left:3px; top:24px; background-color:#FC9;width:99px;border-bottom:1px solid #FC0;}
#nav ul li ul li {width:99px;float:none;border:0px 1px;}

C、光标移上去的状态定义:
定义完上面后,接着对下拉菜单在光标移到上层LI时的状态控制:

#nav ul li ul li a,#nav ul li ul li a:hover{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1px solid #FC0;padding-left:5px;color:#000}
#nav ul li:hover ul, #nav li.over ul{display:block;}

这两行中,第一行#nav ul li ul li a,#nav ul li ul li a:hover {…} 作用是更改整个菜单第一层的LI对下拉部分影响,避免由于继承影响样式。
第二行是用于当光标移上去后,下拉菜单出现。大家可能注意到其中的.over类,我们并没有在结构代码中设置,这是为了控制等下JS生成的类。在#nav ul li:hover ul中,FF下已经能够生效,不需要JS,但IE6下不行,需要通过后半句#nav li.over ul配合JS来生效。

D、javascript代码:

<script type=”text/javascript”>

var showNavList = function(){
if(document.all&&document.getElementById){
var navRoot = document.getElementById(“nav_top”); //注意不能用nav。
for(i=0;i<navRoot.childNodes.length;i++){
var node = navRoot.childNodes[i];
if(node.nodeName==’LI‘){
node.onmouseover=function(){this.className+=’ over’;} //注意over前面有一个空格。
node.onmouseout =function(){this.className = this.className.replace(‘ over’,”);}
}
}
}
}

window.onload = showNavList;
</script>

这样,我们整个下拉菜单就完成了,效果参下面图例,完整代码附到后面,实际应用中,对下拉样式再做美化即可。

<!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=gb2312″ />
<title>CSS测试</title>

<style type=”text/css”>
<!–
body {
margin: 0px;
padding: 0px;
font-size:12px;
}
#nav {
background-color: #666;
border: thin solid #000;
height:100px;
border: 1px solid #666;
width:800px;
margin:0 auto;
}
#nav ul {
background-color: #900;
margin: 0px;
padding: 0px;
margin-right:16px;
margin-top:74px;
width:332px;
list-style-type: none;
float: right;

}
#nav ul li {
float: left;
}
#nav ul li a {
letter-spacing: 1px;
text-align: center;
display: block;
height: 22px;
width: 80px;
border-left: 1px solid #900;
color: #F96;
text-decoration: none;
padding-top: 4px;
background: url(/board.gif) no-repeat -12px -108px;
overflow: hidden;
margin-left: 2px;
}
#nav ul li a:hover {
color: #F60;
background: url(/board.gif) no-repeat -15px -118px;
padding-top: 6px;
overflow: hidden;
height: 20px;
width: 80px;
}

#nav ul li{position:relative;}
#nav ul li ul{display:none;margin:0;padding:0;position:absolute;left:3px;top:24px;background-color:#FC9;width:99px;border-bottom:1px solid #FC0;}
#nav ul li ul li{width:99px;float:none;border:0px 1px;}
#nav ul li ul li a,#nav ul li ul li a:hover{background:#3CF;width:98px;margin-left:0;text-align:left;border-top:1px solid #FC0;padding-left:5px;color:#000}
#nav ul li:hover ul, #nav li.over ul{display:block;}

.content{margin:0 auto;border:1px solid #33F;width:800px;}
.clear{font:0px/0px 宋体;clear:both;display:block}
–>
</style>

<script type=”text/javascript”>

var showNavList = function(){
if(document.all&&document.getElementById){
var navRoot = document.getElementById(“nav_top”);
for(i=0;i<navRoot.childNodes.length;i++){
var node = navRoot.childNodes[i];
if(node.nodeName==’LI’){
node.onmouseover=function(){this.className+=’ over’;}
node.onmouseout =function(){this.className = this.className.replace(‘ over’,”);}
}
}
}
}

window.onload = showNavList;
</script>
</head>

<body>
<div id=”nav”>
<ul id=”nav_top”>
<li id=”nav_index”><a href=”/”>首页</a></li>
<li><a href=”#”>CSS专栏</a>
<ul>
<li><a href=”#”>CSS基础</a></li>
<li><a href=”#”>CSS常用代码</a></li>
<li><a href=”#”>CSS高级技术</a></li>
</ul>
</li>
<li><a href=”#”>JQUERY</a>
<ul>
<li><a href=”#”>Juery基础</a></li>
<li><a href=”#”>Juery工厂函数</a></li>
<li><a href=”#”>Juery深入学习</a></li>
</ul>
</li>
<li><a href=”#”>论坛</a></li>
</ul>
<div class=”clear”></div>
</div>

<div class=”content”>内容区</div>
<div class=”content”>版权区</div>
</body>
</html>

图例:

CSS+div:上拉菜单详解

热点排行