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

Source: Internet
Author: User

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!
 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.