成都京川环保科技有限公司

今天小编跟大家讲解下有关支持IE8的纯css3开发的响应式设计动画菜单教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关支持IE8的纯css3开发的响应式设计动画菜单教程 的相关资料，希望小伙伴们看了有所帮助。

　　这是一个响应式设计的菜单。单击列表图标 当你显示屏大小可以完全水平放下所有菜单项时 菜单水平显示（如图1）。当你的显示屏不能水平放置所有菜单项时 菜单垂直显示（如图2）。 而且显示的时候是以动画的型式显示。效果相当的好。

图1

图2

　　下面是实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板 <divclass="container"> <!--[iflteIE8]> <style> .iconicmenu>label{ border-width:7px; background:#eee; } .iconicmenu:hoverul{ left:8px; } </style> <![endif]--> <divclass="iconicmenu"> <inputtype="checkbox"id="togglebox"/> <ul> <li><atarge="_blank"href="https:///Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li> <li><atarge="_blank"href="https:///Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li> <li><atarge="_blank"href="https:///Shili/css3%E8%8F%9C%E5%8D%95">CSSLibrary</a></li> <li><atarge="_blank"href="https:///Shili/css3%E8%8F%9C%E5%8D%95">CSSGallery</a></li> <li><atarge="_blank"href="https:///Shili/css3%E8%8F%9C%E5%8D%95">Javascript</a></li> <li> <labelfor="togglebox"> </label> </li> </ul> <labelclass="toggler"for="togglebox"> Menu</label> </div> </div>

　　这里加入了兼容ie8的hack 。

　　css代码：

CSS Code复制内容到剪贴板 body { padding:0;margin:0; } .container { width:600px;margin:auto; } .iconicmenu{ position:relative; height:45px; overflow:hidden; } .iconicmenu,.iconicmenu*{ -moz-box-sizing:border-box; box-sizing:border-box; } .iconicmenuinput[type="checkbox"]{ position:absolute; left:0; top:0; opacity:0; } .iconicmenu>label{ z-index:1000; display:block; position:absolute; width:40px; height:40px; float:left; top:0; left:0; background:white; text-indent:-1000000px; border:6pxsolidblack; border-width:6px0; cursor:pointer; -moz-transition:all0.3sease-in; -webkit-transition:all0.3sease-in; transition:all0.3sease-in; } .iconicmenu>label::after{ content:""; display:block; position:absolute; width:100%; height:18%; top:19%; left:0; border:6pxsolidblack; border-width:6px0; -moz-transition:all0.3sease-in; -webkit-transition:all0.3sease-in; transition:all0.3sease-in; } .iconicmenuul{ margin:0; padding:0; position:absolute; margin-left:40px; background:#eee; left:-100%; height:40px; font:bold14pxVerdana; text-align:center; list-style:none; opacity:0; -moz-border-radius:05px5px0; -webkit-border-radius:05px5px0; border-radius:05px5px0; -moz-perspective:10000px; perspective:10000px; -moz-transition:all0.5sease-in; -webkit-transition:all0.5sease-in; transition:all0.5sease-in; } .iconicmenuli{ display:inline; margin:0; padding:0; } .iconicmenuullabel{ cursor:pointer; position:relative; height:100%; text-align:center; } .iconicmenuullabel::after{ content:"x"; display:inline-block; line-height:14px; color:white; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:20px; height:20px; background:black; font-size:18px; margin:5px; margin-top:10px; -moz-transition:all0.3sease-in; -webkit-transition:all0.3sease-in; transition:all0.3sease-in; } .iconicmenuinput[type="checkbox"]:checked~label,.iconicmenuullabel:hover::after{ -moz-transform:rotatey(180deg); -ms-transform:rotatey(180deg); -webkit-transform:rotatey(180deg); transform:rotatey(180deg); } .iconicmenu>label:hover,.iconicmenu>label:hover::after,.iconicmenuinput[type="checkbox"]:checked~label,.iconicmenuinput[type="checkbox"]:checked~label::after{ border-color:darkred; } .iconicmenuinput[type="checkbox"]:checked~ul{ left:8px; opacity:1; -moz-box-shadow:1px1px5pxgray; -webkit-box-shadow:1px1px5pxgray; box-shadow:1px1px5pxgray; } .iconicmenulia{ display:block; float:left; text-align:center; text-decoration:none; color:black; margin:0; padding:10px; padding-right:15px; height:100%; } .iconicmenulia:hover{ background:black; color:white; } @mediascreenand(max-width:580px){ .iconicmenuinput[type="checkbox"]:checked~label{ display:none; } .iconicmenuinput[type="checkbox"]:checked~ul{ margin-left:0; } } @mediascreenand(max-width:560px){ .iconicmenu{ overflow:visible; } .iconicmenuul{ height:auto; } .iconicmenuulli{ min-width:200px;; display:block; } .iconicmenuullia{ float:none;; text-align:left; } }

　以上就是一个纯用css3实现的菜单 是不是很简单呢 谢谢阅读 希望能帮到大家 请继续关注AIDI 我们会努力分享更多优秀的文章。

来源：爱蒂网