Make a Menu with Fixed Property

Mari bermain dengan sesuatu yang berbau fixed. Fixed merupakan property posisi CSS dimana keadaan diam statik walau discroll (begitu kira-kira) :D Coba sobat main-main dimari bentar guna melihat perbandingan and perbedaan static, absolute, fixed dan relative Playit CSS Position ;)
Jika sudah tauk, maka Beben Koben si bloglang anu ganteng kalem tea mau berbagi membuat satu menu dalam kondisi fixed. Tengok postingan Koben sebelumnya mengenai Simple is Beautiful, lihat pada pojok kiri atas! Mirip kayak ngono efek fixed itu sob :) tapi dibubuhi sentuhan ul & li jadi deh menu yang gaya punya :D

Untuk demonya lihat dipojok kiri blog ini, kalo ada berarti sukses demonya yaaa ;))

MENU FIXED

• Prodigy of Head
• BEN TOOLS
• Embah Google
• Contact
• My RSS

Ada enggak demonya bos :)) Bumbu²nya nih

Kode CSS

#bmenu {
position: fixed;
left: 10px;
top: 10px;
background-color :#000066;
border-radius: 15px;
-moz-border-radius: 15px;
width: 202px;
height: 25px;
color: #fff;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
z-index: 3;
overflow: hidden;
padding: 9px 15px 10px;
}

#bmenu h3 {
margin: 0;
padding: 0;
text-align: center;
cursor: pointer;
}

#bmenu ul {
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #004D99;
margin: 15px 0;
padding: 0 15px;
}

#bmenu li {
list-style: none;
margin: 0 0 5px;
padding: 0;
}

#bmenu li a {
color: #FFF;
text-decoration: none;
font-size: 14px;
}

#bmenu li a:hover {
color: #00FF00;
}

#bmenu:hover {
z-index: 5;
height: 286px;
}

Kode HTML

<div id="bmenu">
<h3>Content</h3>
<ul>
<li><a href="#" title="">YOUR TITLE 1</a></li>
<li><a href="#" title="">YOUR TITLE 2</a></li>
<li><a href="#" title="">YOUR TITLE 3</a></li>
<li><a href="#" title="">YOUR TITLE 4</a></li>
<li><a href="#" title="">YOUR TITLE 5</a></li>
<li><a href="#" title="">YOUR TITLE 6</a></li>
<li><a href="#" title="">YOUR TITLE 7</a></li>
<li><a href="#" title="">YOUR TITLE 8</a></li>
<li><a href="#" title="">YOUR TITLE 9</a></li>
<li><a href="#" title="">YOUR TITLE 10</a></li>
</ul>
</div>

SAVE

Happy menu fixed \m/