Cara Membuat Floating Side Menu Bar

Widget

Halo gan, kali ini saya akan share tutorial lagi nih. Mungkin kalian sudah pada tau, tapi gpp deh. Tutorial saya kali ini berjudul "Cara Membuat Floating Side MenuBar". Tampilannya kurang lebih seperti ini nih :

Saya mendapat tutorial ini dari situs http://www.berriart.com/sidr/ dengan melalui sedikit proses editing untuk menghapus jQuery dan mengganti sedikit tampilannya akan tampak lebih gregeeet. Berikut adalah kode CSS dan HTMLnya :

Cara Membaut Floating Side Menu Bar

CSS :

/* MENU NAVIGASI */ .sidr{position:absolute;position:fixed;top:0;height:100%;width:170px;font-family:Oswald;font-size:15px;background:#2a3542;color:#bdc3c7;float:left;overflow:hidden;height: 100%;border-left: 5px solid #2C6891;} .sidr .sidr-inner{padding:0 0 15px} .sidr .sidr-inner>p{margin-left:15px;margin-right:15px} .sidr.right{left:auto;right:-260px} .sidr.left{left:-260px;right:auto} .sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#333;line-height:24px;background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#ffffff),color-stop(100%,#dfdfdf));background-image:-webkit-linear-gradient(#ffffff,#dfdfdf);background-image:-moz-linear-gradient(#ffffff,#dfdfdf);background-image:-o-linear-gradient(#ffffff,#dfdfdf);background-image:linear-gradient(#ffffff,#dfdfdf);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)} .sidr p{font-size:13px;margin:0 0 12px} .sidr p a{color:rgba(51,51,51,0.9)} .sidr>p{margin-left:15px;margin-right:15px} .sidr ul{display:block;margin-top:100px;padding:0;border-bottom:none} .sidr ul li{display:block;margin:0;line-height:40px;border-bottom:none} .sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#bdc3c7;margin:0 5px;font-size:14px} .sidr ul li a:hover{color:#fff;background:rgb(53, 64, 77);transition: all 0.3s ease 0s;} .sidr ul li ul{border-bottom:none;margin:0;display:none;position:absolute} .sidr ul li:hover ul{display:block;height:200px;} .sidr ul li ul li{line-height:40px;font-size:13px} .sidr ul li ul li:last-child{border-bottom:none} .sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px} .sidr ul li ul li a,.sidr ul li ul li span{color:#bdc3c7;padding-left:30px} .sidr form{margin:0 15px} .sidr label{font-size:13px} .sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(51,51,51,0.6);display:block;clear:both} .sidr input[type=checkbox]{width:auto;display:inline;clear:none} .sidr input[type=button],.sidr input[type=submit]{color:#f8f8f8;background:#333} .sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(51,51,51,0.9)}

HTML :

<div class='sidr'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Terima kasih sudah membaca post saya. Jangan ragu untuk mengirim saya setiap komentar dan saran

Untuk proses pemasangannya saya anggap kalian semua sudah bisa, karena tutorial ini cukup mudah kok hanya dengan memasukkan kode tersebut pada templatemu. Thanks a lot ^^