dmenu纯CSS 2下拉菜单可兼容IE6+、chrome等主流浏览器

通过使用CSS2+CSS3制作轻巧炫酷的下拉菜单

下拉菜单是一个站点非常常见的组件,一般通过js实现,但是如果我们仅需要一个下拉菜单那么就可以用CSS制作,除了js本身会影响网页速度如果浏览器关闭javascript还会导致下拉菜单失效。而且减少js还能打开页面时减少请求让页面更快的打开。

实现原理

不知子曰主要通过:hover来实现纯CSS下拉的效果,如果页面有多个不同下拉可以使用行内样式或使用不同class定义多个个性下拉。

像Javascript下拉菜单一样炫酷

可以通过添加CSS3让css下拉菜单和javascript下拉菜单一样有炫酷的弹出收拢效果

CSS代码片段

.dmenu{ float:left;  position:relative; z-index:1; } 
li:hover.dmenu .dmenu-main, div:hover.dmenu .dmenu-main {display: block;}
.dmenu-main{ display:none;   position:absolute; right:-1px; z-index:10; border:1px solid #E6E4E3; border-top:0;  background:#fff;  top:26px; width:53px; border: 1px solid #bebebe;border-top: none; -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);box-shadow: 0 2px 4px rgba(0,0,0,.2);}   
.dmenu-main li{ text-align:center; padding:0px; margin-bottom:-1px; float: none !important;display: block;border-right: none !important;}   
.dmenu-main li a{ display:block;  border-bottom:1px solid #E6E4E3; padding:0px 12px 0px 12px; text-align: left; height:26px; line-height:26px; color:#666 !important; text-shadow:none;}
.dmenu-main li a:hover{ background: #F2F2F2;} 

CSS兼容IE6代码片段

因为IE6对:hover的兼容并不完善,如果需要一个htc文件让IE6下让任意标签兼容:hover。以下CSS只会在IE6下生效。
hec文件请保留到本地,下述地址不保证长期有效!:去百度云下载“ie6hover.htc”

body { _behavior:url("http://yijile.qiniudn.com/usr/themes/yile/images/ie6hover.htc");}

HTML代码片段之UL列表版

<ul>
<li class="dmenu"><a href="#">分类<span>︾</span></a>
<ul class="dmenu-main" style="top:30px; width:119px;"> 
<li><a href="http://yijile.com/notes/">前端/39</a></li>
<li><a href="http://yijile.com/app/">应用/10</a></li>
<li><a href="http://yijile.com/diary/">记录/51</a></li>
<li><a href="http://yijile.com/news/">关注/182</a></li>
<li><a href="http://yijile.com/work/">作业/3</a></li>
<li><a href="http://yijile.com/book/">读书/1</a></li>
</ul>
</li>
</ul>

HTML代码片段之DIV容器版

<ul>
<div class="dmenu"><a href="#">分类<span>︾</span></a>
<div class="dmenu-main" style="top:30px; width:119px;"> 
<a href="http://yijile.com/notes/">前端/39</a>
<a href="http://yijile.com/app/">应用/10</a>
<a href="http://yijile.com/diary/">记录/51</a>
<a href="http://yijile.com/news/">关注/182</a>
<a href="http://yijile.com/work/">作业/3</a>
<a href="http://yijile.com/book/">读书/1</a>
</div>
</div>

dmenu代码片段是从不知子曰博客以及乐中提取的,没有单独测试,所以可能会有一些瑕疵,对css稍加完善便可。不知子曰20140410

e532a729

转载请注明转自:一极乐http://yijile.com/log/370.html


话题相关文章

话题标签

CSSIE6

一极乐 为乐趣而生

《dmenu纯CSS 2下拉菜单可兼容IE6+、chrome等主流浏览器 》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

有 7 条评论

  1. 不知子曰

    很伤内存?
    那么应对ie低版本有什么更好的处理方式么?

  2. 西门

    不建议用.htc

  3. 2557704237@qq.com

    博主说的不错!

  4. 小清新头像

    都是折腾。哈哈~

  5. 不知子曰

    是的,不过亲,这个是纯css2哦

  6. 阿塔历斯

    最近CSS3真的太酷炫了。欲罢不能

  7. 屠龙

    需要慢慢看了呀呵呵




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP