Meteor

纯CSS导航菜单下拉效果

2016-01-25 / Meteor / 互联网文 / css , 导航 / 13862 次围观 / 5 条评论

导航下拉,大家首先想到的是用JS来做。或许是大家看到的下拉菜单演示,多是JS控制的下拉,导致从先入为主的意识上,误以为二级下拉是很难的东西,必须要会Javascript才能做。
其实,一个简答的下拉效果,根本不需要JS也能做。比如,我目前在用的Yuan,以及之前用的趣儿等,所用的下拉,都是利用CSS来做,而且还是CSS2,兼容性也不错(除了IE6)。
cssxiala.png
在分享CSS效果之前,我觉得,应该对当前的需求,做一个分析,这样能够更加理解为什么要运用的这些CSS属性。
逻辑:有一个一级导航是可见的;而要下拉的二级导航在未触发设定的条件之前,是不可见的。其中二级导航的逻辑一般都是:li一级导航>ul>li二级导航
条件:当我们的鼠标移到一级导航上时,二级导航显示(变为可见的)。
在常见的导航中,大多都是使用的ul>li的结构做的导航条。在忽略条件的情况下,如果要正常显示二级导航,那么就应让二级导航下拉出现在对应的位置。无疑,此处应该采用的是CSS的定位,即position属性。
再来分析一下,position有哪些属性值:relative(相对定位)、absolute(绝对定位)、static(正常的)、fixed(基于浏览器窗口固定的)。
要在对应一级导航下面出现二级导航,我们就需要使用absolute绝对定位来帮助我们定位,根据绝对定位是依据前一个relative(如果没有,就是根据当前html文档)来做的绝对定位。所以,在代码中要为一级导航的li选择器声明内,添加一个position:relative;。

li {position:relative;width:100px;height:40px;}/*此处假设宽为100px,高为40px*/

在添加完以后,继续为一级导航的li加一个后代选择器,li ul,然后加入声明,position:absolute;

li ul {position:absolute;top:40px;left:0;width:100px;}/*此处假设宽为100px*/

当然,这里是需要加入上下左右的值做定位的,这个根据父级li的宽度和高度,自行设定。
好了,现在已经把位置搞定了,继续分析下一个需求,显示和隐藏二级导航。
在CSS当中,显示和隐藏的属性就是display了。display的none为隐藏,block或inline-block都可以用做显示。
在文档正常加载时,条件未触发前,二级导航是隐藏的。所以,要为li ul选择器加入一个display:none;

li ul {position:absolute;top:40px;left:0;width:100px;display:none;}

最后,再分析一下如何用CSS触发条件。写过a标签的style,或许大家都清楚,有一个伪类:hover是鼠标指针放到a标签上后,可以改变a标签的style样式的。此处用伪类:hover最合适不过了,而且伪类:hover并非是a标签的专有伪类。
将给一级导航的li单独写一个选择器,用处触发条件。条件触发以后,显示二级导航ul中的内容。

li:hove ul {display:block;}/*用display:block将ul变为正常显示*/

好了,一个简单的下拉效果就做出来了,剩下的就是配合网站的模板再添加一些颜色等属性的搭配了。
总结:
使用纯CSS做下拉效果的要点:定位(position)、显示/隐藏(display)、伪类(:hover),这三个是必要的内容,缺一不可。
这种方法的优点:加载快、兼容好;缺点:无法对下拉显示做CSS3动画(至少目前的我,没办法做到……)
CSS代码:

li {position:relative;width:100px;height:40px;}/*此处假设宽为100px,高为40px*/
li ul {position:absolute;top:40px;left:0;width:100px;display:none;}/*此处假设宽为100px*/
li:hove ul {display:block;}/*用display:block将ul变为正常显示*/

有一点要提醒的是,在CSS代码的整体控制中,如果绝对定位的任意父级使用了overflow:hidden;隐藏溢出的,那么定位的内容显示,是不会超出这个层的。

转载自:橙色阳光

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自Meteor's Blog,原文地址《纯CSS导航菜单下拉效果
上一篇: 用office 365教育版搭建属于自己的域名邮箱 下一篇: 深度XP精简系统收藏

已有 5 条评论

  1. 百芷集

    这些效果多不错

  2. 志运博客

    不错 过来支持一下 同时欢迎你回访志运博客 互相学习,赞赞。

  3. 宏涛博客

    不错哦。玩的挺溜

  4. 张鑫涛博客

    网站内容我很喜欢,互相交流啊博主!希望和贵站做个友情链接!

    1. Meteor

      感谢来访,已送IP,本站有内链和首页链接,请选择后,做好相应位置的本站链接后,留言回复后添加,谢谢!

> 添加新评论

Copyright © Meteor's Blog / Theme by Ben & Meteor / Typecho))) / Admin / Sitemap /