当前位置:首页 > DIV+CSS教程 > 正文

第八天 下拉及多级弹出菜单

作者:××× 来源:标准之路 【 】 浏览: 添加日期:2010-08-23 我要评论(93)     

今天我们开始学习《十天学会web标准(div+css)》的下拉及多级弹出菜单,包含以下内容和知识点:

  • 带下拉子菜单的导航菜单
  • 绝对定位和浮动的区别和运用
  • css自适应宽度滑动门菜单

一、带下拉子菜单的导航菜单

下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点。之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改。

先在html代码增加二级菜单的代码:

<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>

增加完代码后,在浏览器里预览一下:

是不是一看头都大了,怎么变成这样了。别懵,我们分析一下错乱的原因。首先我们看下“自适应宽度”和“固定宽度”两个二级菜单也继承了一级菜单的背景和横向排列,所以我们先把二级菜单的背景和浮动清除掉,增加以下css代码:

#menu ul li ul li { float:none;}
#menu ul li ul li a { background:none;}

现在预览看下,二级菜单是不是已经归位了,但鼠标划过时还继承了一级菜单的样式,所以也改为最终效果上的黑色背景白色文字,还有下拉菜单的灰色边框和灰色背景也一并加上,修改并增加如下代码:

#menu ul li ul { border:1px solid #ccc;}
#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}

第一行设置二级菜单的灰色边框;为了美观,我们把下拉菜单的宽度设置成和一级菜单宽度相同,第二行的width:85px再加上第一行上设置的边框左右各1px后正好是87px,和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px;最后一行设置鼠标划过时的样式。

再预览一下,是不是基本的样式已实现了。

下一步就该把二级菜单隐藏,当鼠标划过时显示出来了。增加如下代码:

#menu ul li ul { display:none; border:1px solid #ccc;}
#menu ul li:hover ul { display:block;}

注意第二行的写法,#menu ul li:hover ul这个样比较难理解,它的意思是定义当鼠标划过#menu下ul下li时,li下的ul的样式(有点饶舌),这里设置为display:block,意思是鼠标划过时显示这块内容。开始隐藏,鼠标划过时显示, 这就实现了我们想要的效果。目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现。我们定义一个类.sfhover(自己命名,需和JS中相同)的属性为display:block;然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css的优先级:指定的高于继承的原则,就实现了IE6下的正确显示。所以增加如下代码:

#menu ul li.sfhover ul { display:block;} 

认真跟着教程制作的朋友可能已经发现,现在应用的JS和纵向导航时应用的不样,但最终实现的效果是一样的。同理css在布局网站时,也是可以多种方法的,正所谓条条大道通罗马,希望大家举一反三,加深前面教程的掌握。JS部分本例不做讲解,如果你想弄清楚JS是如何实现的,请学习js相关内容。到这里,本例就基本完成了,还有一个问题是当前导航下有内容的话,如果二级菜单显示,将会把下边的内容挤跑,所以需要给#menu ul li ul增加position:absolute;属性,当其绝对定位后,它将脱离原来文档流,不再占据空间,因此也不会再把下边内容挤跑了(欲更多了解绝对定位,请查看之前教程或http://www.aa25.cn/div_css/899.shtml)。完整的预览代码如下: 


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

二、绝对定位和浮动的区别和运用

学习到现在,定位和浮动也都涉及到了,但有些朋友可能还在迷惑,两者都可以分栏布局,到底什么时候用浮动,什么时候用定位呢?

当一个元素使用绝对定位后,它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器使用相对定位时)。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示,而没有脱离文档流,理解了这一点,就很容易弄明白什么时候用定位,什么时候用浮动了。

一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。有关定位的视频教程请参看:http://www.aa25.cn/div_css/899.shtml

三、 css自适应宽度滑动门菜单

CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿上边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了。那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单。下面我们讲一下自适应宽度按钮,和菜单原理是一样,因为自适应宽度菜单在《新手常见问题》中已经讲过了,如果学会自适应按钮,你还不会制作自适应菜单的话,请阅读http://www.aa25.cn/div_css/898.shtml

你是否还记得在第五章时学习的css按钮实例(如下图),当时只做了一个按钮,它这里是三个按钮,而且宽度不一样,今天我们还以这个按钮为基础,制作宽度自应适应的按钮。

那么它的实现原来是什么?我们看下边一张图。要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐,如下的原理图,

四条辅助线内为一个按钮元素,绿色部分为span,然后定义它的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时,会把span撑开,这实现了自适应宽度的按钮了。这里需要一张如下的图片,它的宽度要宽于你所应用的最宽宽度,这样才能显示正常,同时根据以前学习的css Sprites技术,把背景图片和鼠标经过图片放到一张图片上。

拿第五章css按钮的例子代码进行修改,先改为背景图片使用上图,再增加两个字数不等按钮,并在文字上增加span标签


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

预览显示效果如下所示,因背景图片比较长,所以右侧显示不太友好,下一步就需要把a的宽度给去掉,设置span的背景,使右侧显示正常,另外把三个按钮横向排列

在a上增加如下代码:

float:left; margin:5px;

横向排列,并增加5px的外边距,现在看下效果吧。为了美观,下一步需要a的左侧增加填充,使文字不死贴左侧,同理span右侧需要增加一个同样的填充。

a { display: block; float:left; margin:5px; height: 37px;line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left:18px; }
a span { display:block; background: url(btn_bg.gif) no-repeat right 0px; padding-right:20px;}
a:hover { background: url(btn_bg.gif) no-repeat 0px -37px;}
a:hover span{ background: url(btn_bg.gif) no-repeat right -37px;}

对比以上代码,可能你已经发现,原来a顶部的3px给去掉了,把高度改为37px了,行高也改为37px了,为什么这么做,大家动手试下就明白了。然后设置a下span的背景图片,span默认是内联元素,所以需先转换为块级元素;另外需增加鼠标经过时span的样式。显示效果如下,对比一下实例图,是不是实现了这样的效果。


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: 十天学会web标准 div+css 下拉菜单 多级菜单 弹出菜单

所属专题:十天学会DIV+CSS

更多评论(93)..会员评论

CSSER1029(183.5.*.*) 发表于:2014-03-23 17:54:07
照着教程做完后,保存后浏览器看后在最后在淘宝上开网店这里还是会出现网店在下一行,对比参数都是一致的,这个如何解决。求解决。
threevin(183.17.*.*) 发表于:2014-03-18 18:31:27
css自适应宽度滑动门菜单 最后一个代码执行起来效果不一样。 右边的显示有问题,要鼠标移动过去后才能显示正常。怎么回事?
xinshou2014(120.85.*.*) 发表于:2014-01-02 15:32:30
自适应宽度按钮——在a:hover和a:hover span中添加 no-repeat后,鼠标滑过没显示按钮图片,若是没添加 no-repeat则能显示,这是什么情况??
manman(218.2.*.*) 发表于:2013-11-26 22:30:55
文字左边是取a padding-left:18px ,文字右边是取a span 里的padding-right:20px,左右是咋对称起来的,还是写出来来,根据效果来调整具体数值的? 文字上下边距可以精确计算了,左右这个咋算都少2px,头疼,管理员赐教啊,谢谢啦!
chenxiaolei(116.211.*.*) 发表于:2013-07-25 11:52:29
我照着这个做了一个,下拉菜单加了 #menu ul li ul position:absolute 之后为什么下拉菜单是跟上面的菜单的顶部对齐的,而不是 和底部对其的,结果就是下拉菜单把上面的菜单遮住了, 请问老师这个怎么解决?
管理员回复:你要设置top值,让他的值等于ul的高度
pcvph(58.39.*.*) 发表于:2013-07-16 23:11:39
讲的很好,希望在这里就学会web布局和css,为后续的学习打下坚实的基础。
rosiness(60.176.*.*) 发表于:2013-05-07 12:02:23
列子“一、带下拉子菜单的导航菜单” 有两个样式要不要加 #menu ul li 加个display:inline; #menu ul li ul li 加个 display: block; 需不需要加这两个样式兼容IE6呢?
管理员回复:li本来就是块 至于要不要加inline那要看你子集是不是有浮动了。
guanlihua(210.13.*.*) 发表于:2013-05-04 13:03:46
padding-top: 3px去掉,加上span的padding-top:0px,爲什麽沒有實現同樣效果呢,麻煩老師解答

出差旅游免费预订酒店

【视频教程】新手常见问题