HTML
<nav class="vertical"> <input type="checkbox" id="toggle2" /> <label for="toggle2"> <span class="icon-reorder"></span> </label> <menu> <li><a class="icon-home" href="#"></a></li> <li><a class="icon-user" href="#"></a></li> <li><a class="icon-picture" href="#"></a></li> <li><a class="icon-facetime-video" href="#"></a></li> </menu> </nav> <nav class="horizontal"> <input type="checkbox" id="toggle" /> <label for="toggle"> <span class="icon-reorder"></span> </label> <menu class="cover"> <li><a class="icon-home" href="#"></a></li> <li><a class="icon-user" href="#"></a></li> <li><a class="icon-picture" href="#"></a></li> <li><a class="icon-facetime-video" href="#"></a></li> </menu> </nav>
CSS
/* Both **********************************************/ @import url( http://fonts.googleapis.com/css?family=Quantico ); body { background-color: #333; } nav { overflow : hidden; } nav input[type=checkbox] { display : none; } menu { position : relative; transition : all .4s cubic-bezier(0.86, 0, 0.07, 1); } label { position: relative; z-index : 2; } li { list-style-type: none; } a , label { display : block !important; width : auto !important; text-decoration : none; font-size : 35px; background : linear-gradient(#292929, #242424); color : #FFF; padding : 20px 23px; border : 1px solid black; } a:after { content : ''; position: absolute; display : none; font-size : 18px; font-family: 'Quantico' , georgia; line-height : 20px; text-align : center; color : #fff; text-shadow : none; padding : 30px 20px; text-transform : capitalize; } li:hover a:after { display : block; } li:first-child:hover a:after { content : 'home'; } li:nth-child(2):hover a:after { content : 'about'; } li:nth-child(3):hover a:after { content : 'gallery'; } li:nth-child(4):hover a:after { content : 'video'; } span { display : inline-block; transition : all .4s cubic-bezier(0.86, 0, 0.07, 1); } menu a:hover { box-shadow : inset 0 0 0 4px #B93632; text-shadow : 0 0 2px #B93632; background : #1B1B1B; } /* Horizontal **********************************************/ .horizontal label { float : left; } .horizontal menu { float : left; left : 0; } .horizontal li { float : left; } .horizontal label , .horizontal a { border-right-color : rgba(255,255,255,0.1); } .horizontal li:last-child a { border-right : 1px solid black ; } .horizontal a:after { top : 0; left : 100%; } #toggle:checked ~ menu { left : -312px; transition : left .4s cubic-bezier(0.86, 0, 0.07, 1); } #toggle:checked ~ label span { transform : rotate(-90deg); transition : all .4s cubic-bezier(0.86, 0, 0.07, 1); } /* Vertical **********************************************/ nav.vertical { height: 500px; width : 80px; float : right; } .vertical menu { top : -332px; transition : all .4s cubic-bezier(0.86, 0, 0.07, 1); } .vertical a , .vertical label { border-top-color : rgba(255,255,255,0.1); } .vertical a:after { padding : 20px 0; width : 100%; left : 0; top : 100%; } .vertical span { transform : rotate(90deg); } #toggle2:checked ~ menu { top : 0; transition : top .4s cubic-bezier(0.86, 0, 0.07, 1); } #toggle2:checked ~ label span { transform : rotate(0deg); transition : all .4s cubic-bezier(0.86, 0, 0.07, 1); }
Java script
ندارد
دموی آنلاین
تا بارگذاری کامل کمی صبر کنید
See the Pen Khafan Menu by Mojtaba Seyedi (@new) on CodePen