资源描述
DIV+CSS教程第八天下拉及多级弹出菜单.docx
《DIV+CSS教程第八天下拉及多级弹出菜单.docx》由会员分享,可在线阅读,更多相关《DIV+CSS教程第八天下拉及多级弹出菜单.docx(13页珍藏版)》请在冰豆网上搜索。
![DIV+CSS教程第八天下拉及多级弹出菜单.docx](https://file1.bdocx.com/fileroot1/2023-2/3/17ef9932-273d-4695-9538-2368500fe2e1/17ef9932-273d-4695-9538-2368500fe2e11.gif)
DIV+CSS教程第八天下拉及多级弹出菜单
第八天 下拉及多级弹出菜单
文章出处:
标准之路(
编辑:
杨雨晨思
今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单,包含以下内容和知识点:
▪带下拉子菜单的导航菜单
▪绝对定位和浮动的区别和运用
▪css自适应宽度滑动门菜单
一、带下拉子菜单的导航菜单
下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点。
之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。
先在html代码增加二级菜单的代码:
增加完代码后,在浏览器里预览一下:
是不是一看头都大了,怎么变成这样了。
别懵,我们分析一下错乱的原因。
首先我们看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列,所以我们先把二级菜单的背景和浮动清除掉,增加以下css代码:
#menuulliulli{float:
none;}
#menuulliullia{background:
none;}
现在预览看下,二级菜单是不是已经归位了,但鼠标划过时还继承了一级菜单的样式,所以也改为最终效果上的黑色背景白色文字,还有下拉菜单的灰色边框和灰色背景也一并加上,修改并增加如下代码:
#menuulliul{border:
1pxsolid#ccc;}
#menuulliulli{float:
none;width:
85px;background:
#eee;margin:
0;}
#menuulliullia{background:
none;}
#menuulliullia:
hover{background:
#333;color:
#fff;}
第一行设置二级菜单的灰色边框;为了美观,我们把下拉菜单的宽度设置成和一级菜单宽度相同,第二行的width:
85px再加上第一行上设置的边框左右各1px后正好是87px,和一级菜单宽度相同。
margin:
0是为了清除掉继承一级菜单中margin-left:
2px;最后一行设置鼠标划过时的样式。
再预览一下,是不是基本的样式已实现了。
下一步就该把二级菜单隐藏,当鼠标划过时显示出来了。
增加如下代码:
#menuulliul{display:
none;border:
1pxsolid#ccc;}
#menuulli:
hoverul{display:
block;}
注意第二行的写法,#menuulli:
hoverul这个样比较难理解,它的意思是定义当鼠标划过#menu下ul下li时,li下的ul的样式(有点饶舌),这里设置为display:
block,意思是鼠标划过时显示这块内容。
开始隐藏,鼠标划过时显示,这就实现了我们想要的效果。
目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现。
我们定义一个类.sfhover(自己命名,需和JS中相同)的属性为display:
block;然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css的优先级:
指定的高于继承的原则,就实现了IE6下的正确显示。
所以增加如下代码:
#menuulli.sfhoverul{display:
block;}
认真跟着教程制作的朋友可能已经发现,现在应用的JS和纵向导航时应用的不样,但最终实现的效果是一样的。
同理css在布局网站时,也是可以多种方法的,正所谓条条大道通罗马,希望大家举一反三,加深前面教程的掌握。
JS部分本例不做讲解,如果你想弄清楚JS是如何实现的,请学习js相关内容。
到这里,本例就基本完成了,还有一个问题是当前导航下有内容的话,如果二级菜单显示,将会把下边的内容挤跑,所以需要给#menuulliul增加position:
absolute;属性,当其绝对定位后,它将脱离原来文档流,不再占据空间,因此也不会再把下边内容挤跑了(欲更多了解绝对定位,请查看之前教程或
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
--//-->
[CDATA[//>
--
functionmenuFix(){
varsfEls=document.getElementById("menu").getElementsByTagName("li");
for(vari=0;isfEls[i].onmouseover=function(){
this.className+=(this.className.length>0?
"":
"")+"sfhover";
}
sfEls[i].onMouseDown=function(){
this.className+=(this.className.length>0?
"":
"")+"sfhover";
}
sfEls[i].onMouseUp=function(){
this.className+=(this.className.length>0?
"":
"")+"sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("(?
|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//-->
]]>
body{font-family:
Verdana;font-size:
12px;line-height:
1.5;}
a{color:
#000;text-decoration:
none;}
a:
hover{color:
#F00;}
#menu{width:
500px;height:
28px;margin:
0auto;border-bottom:
1pxsolid#E10001;}
#menuul{list-style:
none;margin:
0px;padding:
0px;}
#menuulli{float:
left;margin-left:
2px;}
#menuullia{display:
block;width:
87px;height:
28px;line-height:
28px;text-align:
center;background:
url(00no-repeat;font-size:
14px;}
#menuullia:
hover{background:
url(00no-repeat;}
#menuullia#current{background:
url(00no-repeat;font-weight:
bold;color:
#fff;}
#menuulliul{border:
1pxsolid#ccc;display:
none;position:
absolute;}
#menuulliulli{float:
none;width:
87px;background:
#eee;margin:
0;}
#menuulliullia{background:
none;}
#menuulliullia:
hover{background:
#333;color:
#fff;}
#menuulli:
hoverul{display:
block;}
#menuulli.sfhoverul{display:
block;}
首页网页版式web教程web实例常用代码