Web标准:八、下拉及多级弹出菜单

Web标准:八、下拉及多级弹出菜单

知识点:

1.带下拉子菜单的导航菜单
2.绝对定位和浮动的区别和运用
3.CSS自适应宽度滑动门菜单
 
1)带下拉子菜单的导航菜单
带下拉子菜单的就是在一级导航下加一个二级菜单。这个在上一节第七节课上我已经做出来了,这里就不再写了。再重温一下注意点:如果要在一级菜单下增加二级菜单,二级菜单需要加一个float:none;来去掉浮动,否则二级菜单也会浮动到一行上去了。
 
2)绝对定位和浮动的区别和运用技术分享
绝对定位:它的位置将依据浏览器左上角开始计算或相对于父容器(在父容器中使用相对定位时)。绝对定位使元素脱离文档流,因此不占空间。普通元素的布局就当绝对定位不存在时一样,因为绝对定位的框与文档流无关,所以它可以覆盖其他页面上的其他元素。
比如二级菜单因为使用了绝对定位,所以出现时不会把下面的元素挤开,而是在之上显示的。
技术分享
浮动元素:它的定位是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或右侧。文字内容环绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补它原先的空间。它只改变了文档流的显示,而没有脱离文档流。
注意:一个元素浮动或绝对定位后,它将自动转换为块级元素,而不论该元素本身是什么类型。
 
3)CSS自适应宽度滑动门菜单技术分享
自适应宽度的滑动门菜单,因为有些css按钮的字数不一样,需要显示的长度不一致,所以需要用到自适应。
要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,然后分别在a上和span上设置背景,一个左侧对齐,一个右侧对齐(是指获取背景图片时一个左对齐一个右对齐)。如下的原理图:
技术分享
技术分享
四条辅助线内为一个按钮元素,绿色部为span,定义他的背景图片靠右侧对齐,而左侧的部分为a的背景图片,定义靠左侧对齐。当文字多时会将span撑开,者实现了自适应宽度的按钮了。
之所以要这样,可以看下图的按钮背景图片,左右两侧是有边框的,所以要定义两个背景,将左右两侧的边框都取到。
技术分享
技术分享
CSS样式如下:
技术分享
结果如下图:
技术分享
说明:1.注意要想使按钮中的文字与左右留开距离,可以在a标签和span标签中分别加个padding。
        2.根据以前学的CSS Sprites技术,将两张图片放到一张图片上,图片从右侧取直接给url()后加 right -40px no-repeat即可。
 
PS:因为这个图片是直接用截图下来的,所以尺寸不精确,所以边框显示会不正确。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。