支持IE8的纯css3开发的响应式设计动画菜单教程

Jelena ·

更新时间:2024-09-21

· 910 次阅读

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

图1

图2

　　下面是实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板 <div class="container">  <div class="iconicmenu"> <input type="checkbox" id="togglebox" /> <ul> <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li> <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li> <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li> <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li> <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">JavaScript</a></li> <li> <label for="togglebox"> </label> </li> </ul> <label class="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; } .iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */ position: absolute; left: 0; top: 0; opacity: 0; } .iconicmenu > label { /* Main label icon to toggle menu state */ z-index: 1000; display: block; position: absolute; width: 40px; height: 40px; float: left; top: 0; left: 0; background: white; text-indent: -1000000px; border: 6px solid black; /* border color */ border-width: 6px 0; cursor: pointer; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /* transition for flipping label */ } .iconicmenu > label::after { /* inner stripes inside label */ content: ""; display: block; position: absolute; width: 100%; height: 18%; top: 19%; left: 0; border: 6px solid black; /* border color */ border-width: 6px 0; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /* transition for flipping label */ } .iconicmenu ul { /* UL menu inside container */ margin: 0; padding: 0; position: absolute; margin-left: 40px; background: #eee; left: -100%; /* hide menu intially */ height: 40px; /* height of menu */ font: bold 14px Verdana; text-align: center; list-style: none; opacity: 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; -moz-perspective: 10000px; perspective: 10000px; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; /* transition for animating UL in and out */ } .iconicmenu li { display: inline; margin: 0; padding: 0; } .iconicmenu ul label { /* label button inside UL to close menu */ cursor: pointer; position: relative; height: 100%; text-align: center; } .iconicmenu ul label::after { /* label button x */ 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: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after { -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -webkit-transform: rotatey(180deg); transform: rotatey(180deg); /* flip labels vertically onMouseover */ } .iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after { border-color: darkred; /* highlight color of main menu label onMouseover */ } .iconicmenu input[type="checkbox"]:checked ~ ul { left: 8px; /* Animate menu into view */ opacity: 1; -moz-box-shadow: 1px 1px 5px gray; -webkit-box-shadow: 1px 1px 5px gray; box-shadow: 1px 1px 5px gray; } .iconicmenu li a { display: block; float: left; text-align: center; text-decoration: none; color: black; margin: 0; padding: 10px; padding-right: 15px; height: 100%; } .iconicmenu li a:hover { background: black; color: white; } /* ----------------------------- CSS Media Queries ----------------------------- */ /* These rules control which portions of the menu gets shown when the screen size is below a certain width. By default 2 stages are defined depending on browser screen width. */ @media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */ .iconicmenu input[type="checkbox"]:checked ~ label { display: none; } .iconicmenu input[type="checkbox"]:checked ~ ul { margin-left: 0; } } @media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */ .iconicmenu { overflow: visible; } .iconicmenu ul { height: auto; } .iconicmenu ul li { min-width: 200px;; display: block; } .iconicmenu ul li a { float: none;; text-align: left; } }

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

动画 CSS

1024 个赞