Selasa, 28 Juni 2011

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

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/

Tidak ada komentar:

Posting Komentar