Responsive design Animation menu developed by css3 (ie8 supported) and css3ie8

Responsive design Animation menu developed by css3 (ie8 supported) and css3ie8

This is a responsive menu. Click the list icon. The menu is displayed horizontally when the display size is full and all menu items can be put down horizontally (1 ). When you cannot place all menu items horizontally on your display screen, the menu is displayed vertically (2 ). In addition, it is displayed as an animation. The effect is quite good.

Click here for Online Preview

The source code for implementing this function is provided below, which 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>

Hack compatible with ie8 is 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;        }    }

For reprint, enter the original address:

Is there a way for IE8 to support CSS3 (radio button animation effect )??

You can only use the animation method in Jquery to achieve the animation effect for IE8/7/5/6.

Why does CSS 3 transition animation not work in responsive web navigation?

You just set the transition parameter. You didn't set how to respond to this excessive response and excessive value!