這是一個響應式設計的菜單。單擊列表圖標，當你顯示屏大小可以完全水平放下所有菜單項時，菜單水平顯示（如圖1）。當你的顯示屏不能水平放置所有菜單項時，菜單垂直顯示（如圖2）。 而且顯示的時候是以動畫的型式顯示。效果相當的好。

點擊這里在線預覽

下面貼出實現這功能的源代碼，這是一個純用css3實現的菜單

html代碼：

<div class="container"><!--[if lte IE 8]> <style>.iconicmenu > label{border-width: 7px;background: #eee;}.iconicmenu:hover ul{left: 8px; /* show menu onmouseover in IE8 and below */}</style> <![endif]--><div class="iconicmenu"><input type="checkbox" id="togglebox" /><ul><li><a targe="_blank" href="http://***/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li><li><a targe="_blank" href="http://***/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li><li><a targe="_blank" href="http://***/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li><li><a targe="_blank" href="http://***/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li><li><a targe="_blank" href="http://***/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代碼：

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;}}

?轉載請注明原文地址：

轉載于:https://www.cnblogs.com/liaohuolin/p/3925079.html

總結

以上是生活随笔為你收集整理的纯css3开发的响应式设计动画菜单（支持ie8）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。