css3のみで開発されたレスポンシブデザインのアニメーションメニュー（ie8対応）_html/css_WEB-ITnose

これはレスポンシブデザインのメニューです。リスト アイコンをクリックすると、表示画面がすべてのメニュー項目を水平に収まる大きさになると、メニューが水平に表示されます (図 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://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>

ie8 と互換性のあるハックがここに追加されています。

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