Responsive design animated menu developed purely with css3 (supports ie8)_html/css_WEB-ITnose

This is a responsive designed menu. Click the list icon, and when your display screen is large enough to fit all menu items horizontally, the menu will appear horizontally (Figure 1). When your display screen cannot hold all menu items horizontally, the menu appears vertically (Figure 2). And it is displayed in the form of animation. The effect is quite good.

Click here to preview online

The source code to implement this function is posted below. This is a menu implemented purely with css3

html code:

 <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://www.w2bc.com/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>                <li><a targe="_blank" href="http://www.w2bc.com/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>                <li><a targe="_blank" href="http://www.w2bc.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li>                <li><a targe="_blank" href="http://www.w2bc.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>                <li><a targe="_blank" href="http://www.w2bc.com/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>

A hack compatible with ie8 has been added here.

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