Selamat siang sobat blogger, kali ini saya akan share menu navigasi 100% menggunakan
CSS. mungkin yang saya maksud disini kurang pas dengan judul diatas. :D
Mungkin kalian sudah pernah melihat menu yang saya share kali ini tapi mungkin kebanyakan menggunakan
jQuery atau
Java, nah yang saya share sepenuhnya menggunakan
CSS, langsung saja coba dibawah ini.
Berikut Langkah-Langkah Pemasangan
1. Masukkan kode ini diatas kode
]]></b:skin>
/* Menu Navigasi Show Hide DS-Blog */
#DS-menu {position: fixed !important; bottom: 0px; left:5px !important;
-webkit-transition: bottom 300ms ease-out 0;
-moz-transition: bottom 300ms ease-out 0;
-o-transition: bottom 300ms ease-out 0;
transition: bottom 300ms ease-out 0;
font:Helvetica, Arial, Helvetica, Arial;
font-size: 12px !important;
font-weight: normal !important;
letter-spacing: normal !important;
line-height: normal !important;
list-style-type: none !important;
text-align: left !important;
text-indent: 0 !important;
text-transform: none !important;
visibility: visible !important;
white-space: nowrap !important;
word-spacing: normal !important;
letter-spacing: normal !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
min-width: 0 !important;
}
#DS-menu ul{
background-color:#272727;
border:3px double #3d3d3d;
margin: 5px !important;
padding: 2px !important;
list-style-type: none;
opacity:none;
}
#DS-menu a{
margin: 0; padding: 0;
text-decoration: none;
}
#DS-menu li{
position: relative;
height: auto;
margin-bottom: 2px !important;
margin-left: -220px;
transition-property: margin;
transition-duration: .2s;
transition-timing-function: easeInCirc;
transform: translate3d(0,0,0);
-webkit-transition-property: margin, opacity;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: easeInCirc;
-webkit-transform: translate3d(0,0,0);
}
#DS-menu span{
width: 100px;
z-index: 1 !important;
top: 6px; left: 5px;
display: inline-block;
padding: 7px !important;
white-space: nowrap;
background-color:#272727;
border:1px solid #3c3c3c;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px 0px rgba(0,0,0,.4);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: bold;
color: #F5F5F5 !important;
text-align: left !important;
}
#DS-menu span:hover {
background-color:rgba(0,0,0,.2);
}
#DS-click:checked ~ label::before { content: ' '; }
#DS-click ~ label::before { content: ' '; }
#DS-click:checked ~ label:before { content: ' '; }
#DS-click ~ label:before { content: ' '; }
#DS-click[type="checkbox"] { margin-left: -200px; }
#DS-click[type="checkbox"]:checked + ul > li { margin-left: 0px !important; }
#DS-menu.show li { margin-left: 0px !important; }
/* Menu Navigasi Show Hide DS-Blog */
#DS-click[type="checkbox"].show + ul > li { margin-left: 0px; }
#DS-menu label{
position: relative !important;
left: 7px;
overflow:hidden;
display: inline-block;
z-index: 999;
width: 37px; height: 35px;
margin: 0 !important;
border-radius:4px;
padding: 0 !important;
line-height: 35px !important;
cursor: pointer !important;
user-select: none;
background-image: url('http://i1242.photobucket.com/albums/gg536/dhedidik/ds-menu_zps74c79a3e.png') !important;
background-position: 0 0px !important;
}
#DS-menu label:active{
bottom: -1px !important;
}
2. Masukan kode ini diatas
</body>
<div id="DS-menu">
<input type="checkbox" id="DS-click" name="DS-click" />
<ul>
<li style="transition-delay: 0; -webkit-transition-delay:0;">
<a href="/"><span>Beranda</span></a></li>
<li style="transition-delay: .1s; -webkit-transition-delay:.1s;"><a href="/"><span>Blogger</span></a></li>
<li style="transition-delay: .2s; -webkit-transition-delay: .2s;"><a href="/"><span>Tutorial</span></a></li>
<li style="transition-delay: .3s; -webkit-transition-delay: .3s;"><a href="/"><span>Komputer</span></a></li>
</ul>
<label for="DS-click" onclick=""></label>
</div>
Saya sarankan untuk di pertinjau dulu, jika tidak terjadi eror maka silahkan di save.
Sekian dulu postingan saya kali ini, mohon maaf kalo jelek. :D
Title : Menu Navigasi Show Hidde Sederhana Pure CSS
Description : Selamat siang sobat blogger, kali ini saya akan share menu navigasi 100% menggunakan CSS . mungkin yang saya maksud disini kurang pas dengan...