这是一个响应式设计的菜单。单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示（如图1）。当你的显示屏不能水平放置所有菜单项时，菜单垂直显示（如图2）。 而且显示的时候是以动画的型式显示。效果相当的好。
图1
图2
下面是实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <divclass="container"> <!--[iflteIE8]> <style> .iconicmenu>label{ border-width:7px; background:#eee; } .iconicmenu:hoverul{ left:8px;/*showmenuonmouseoverinIE8andbelow*/ } </style> <![endif]--> <divclass="iconicmenu"> <inputtype="checkbox"id="togglebox"/> <ul> <li><atarge="_blank"href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li> <li><atarge="_blank"href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li> <li><atarge="_blank"href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSSLibrary</a></li> <li><atarge="_blank"href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSSGallery</a></li> <li><atarge="_blank"href="http://www.jb51.net/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"]{/*checkboxusedtotogglemenustate*/ position:absolute; left:0; top:0; opacity:0; } .iconicmenu>label{/*Mainlabelicontotogglemenustate*/ z-index:1000; display:block; position:absolute; width:40px; height:40px; float:left; top:0; left:0; background:white; text-indent:-1000000px; border:6pxsolidblack;/*bordercolor*/ border-width:6px0; cursor:pointer; -moz-transition:all0.3sease-in; -webkit-transition:all0.3sease-in; transition:all0.3sease-in;/*transitionforflippinglabel*/ } .iconicmenu>label::after{/*innerstripesinsidelabel*/ content:""; display:block; position:absolute; width:100%; height:18%; top:19%; left:0; border:6pxsolidblack;/*bordercolor*/ border-width:6px0; -moz-transition:all0.3sease-in; -webkit-transition:all0.3sease-in; transition:all0.3sease-in;/*transitionforflippinglabel*/ } .iconicmenuul{/*ULmenuinsidecontainer*/ margin:0; padding:0; position:absolute; margin-left:40px; background:#eee; left:-100%;/*hidemenuintially*/ height:40px;/*heightofmenu*/ 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;/*transitionforanimatingULinandout*/ } .iconicmenuli{ display:inline; margin:0; padding:0; } .iconicmenuullabel{/*labelbuttoninsideULtoclosemenu*/ cursor:pointer; position:relative; height:100%; text-align:center; } .iconicmenuullabel::after{/*labelbuttonx*/ 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);/*fliplabelsverticallyonMouseover*/ } .iconicmenu>label:hover,.iconicmenu>label:hover::after,.iconicmenuinput[type="checkbox"]:checked~label,.iconicmenuinput[type="checkbox"]:checked~label::after{ border-color:darkred;/*highlightcolorofmainmenulabelonMouseover*/ } .iconicmenuinput[type="checkbox"]:checked~ul{ left:8px;/*Animatemenuintoview*/ 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; } /*-----------------------------CSSMediaQueries-----------------------------*/ /* Theserulescontrolwhichportionsofthemenugetsshownwhenthescreensizeisbelowacertainwidth. Bydefault2stagesaredefineddependingonbrowserscreenwidth. */ @mediascreenand(max-width:580px){/*Hidetoggleiconwhenmenuisalreadyopen(increasesusablemenuspaceby40px)*/ .iconicmenuinput[type="checkbox"]:checked~label{ display:none; } .iconicmenuinput[type="checkbox"]:checked~ul{ margin-left:0; } } @mediascreenand(max-width:560px){/*Converthorizontalmenutoverticaldropdowninstead(friendlyacrossallscreensizes)*/ .iconicmenu{ overflow:visible; } .iconicmenuul{ height:auto; } .iconicmenuulli{ min-width:200px;; display:block; } .iconicmenuullia{ float:none;; text-align:left; } }
以上就是一个纯用css3实现的菜单，是不是很简单呢，谢谢阅读，希望能帮到大家，请继续关注查字典教程网，我们会努力分享更多优秀的文章。
【支持IE8的纯css3开发的响应式设计动画菜单教程】相关文章：