CSS3: Balloon Style Navigation Menu

UPDATE!!!
Terdapat bug di bagian segitiga ketika menggunakan browser Mozilla. Untuk pengguna Chrome situasi tetep aman. Keep using updated browser Masbro :)

Berhubung kemarin habis ngutak-ngatik blog lama, ternyata nemu sesuatu yang bagus nih. Hasil eksperimen CSS dulu :) Namanya Balloon Style Navigation Menu. Sesuai namanya, ini adalah menu navigasi yang bentuk tiap menunya dibikin menyerupai balon, dan dibuat dengan 100% CSS. Beneran tanpa gambar!

Sebelumnya, tiap koding akan dipisah untuk mempermudah pemahaman, jadi tinggal ngikutin alur yang ada. Oke, ini dia:



Kerangka Dasar
Seperti menu pada umumnya, kita buat kerangka dasarnya dulu pake HTML. Biasanya tag navigasi ditaruh diatasnya header, tapi terserah mau taruh disebelah mana, nanti tinggal diatur posisinya :)

• Home Halaman utama

<div id='navwrap'>
<div id='bubnav'>
<ul>
<li class='ho'><a href='/'>Home <span>Halaman utama</span></a></li>
<li class='fo'><a href='/'>Info <span>Tentang</span></a></li>
<li class='co'><a href='/'>Contact <span>Hubungi</span></a></li>
<li class='po'><a href='/'>Portofolio <span> kerjaanku</span></a></li>
<li class='si'><a href='/'>Sitemap <span>Daftar Isi</span></a></li>
</ul>
</div>
</div>

Wrapping Style
Disini maksudnya pembungkus utama menu, biar nggak acak-acakan, kita jadiin satu di dalam satu wrap. Jangan lupa dipisah, ini kan CSS. Taruh aja diatasnya </b:skin>

/* Wrapping */
#navwrap {
height: 200px;
margin: 10px auto;
width: auto;
position: absolute;
}
#bubnav {
height: 200px;
margin: auto;
width: 700px;
}

List Style
Nah kita masuk ke styiling untuk list/daftar menunya.

• Home Halaman utama

/* List Navigasi */
#bubnav ul {
list-style: none;
}
#bubnav li {
background: lightgreen;
position: relative;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
-o-border-radius: 400px;
display: inline-block;
float: left;
height: 100px;
margin: 10px;
text-align: center;
width: 150px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}

Link Navigasi
Nah disini link dilengkapi juga dengan deskripsi. Misalnya link "Home" dengan deskripsi "Halaman utama", dan sebagainya. Contohnya seperti ini:

• Home Halaman utama

/* link navigasi */
#bubnav li a {
color: #8F8F8F;
display: block;
font-size: 20px;
font-weight: bold;
padding: 30px;
text-decoration: none;
text-shadow: gray 1px 1px 3px;
}

/* untuk tulisan deskripsi di bawah link navigasinya */
#bubnav li a span {
color: #7D7D7D;
display: block;
font-family: serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
margin-top: -5px;
text-decoration: none;
text-shadow: gray 0px 0px 3px;
}

Styling Balloon Menu
Oke, disini kita mulai Balloonizing-nya. Disini balonnya pake background gradient, CSS3 (warna bisa di dapat dari sini: http://www.colorzilla.com/gradient-editor/). Disini juga ada pengkondisian sesuai browsernya, termasuk browser lama yang nggak mendukung CSS3 gradient. Oiya, margin disini berfungsi biar tiap menu posisinya nggak sama, jadi style balonnya lebih berasa :P

• Home Halaman utama

#bubnav .ho {
background: #9FF276; /* old browsers */
background: -moz-linear-gradient(top, #C3FFBA 24%, #9FF276 65%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,#C3FFBA), color-stop(65%,#9FF276)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C3FFBA', endColorstr='#9FF276',GradientType=0 ); /* ie */
margin: 40px -15px 0px -40px; z-index: 1;
}
#bubnav .fo {
background: #BAD7DE; /* old browsers */
background: -moz-linear-gradient(top, #DBFBFF 13%, #BAD7DE 74%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#DBFBFF), color-stop(74%,#BAD7DE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DBFBFF', endColorstr='#BAD7DE',GradientType=0 ); /* ie */
margin: 0px 20px 0px 0px; z-index: 3;
}
#bubnav .co {
background: #E7EB86; /* old browsers */
background: -moz-linear-gradient(top, #F9FFD1 13%, #E7EB86 74%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#F9FFD1), color-stop(74%,#E7EB86)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9FFD1', endColorstr='#E7EB86',GradientType=0 ); /* ie */
margin: 70px 0px 0px -80px;
}
#bubnav .po {
background: #FAB6B6; /* old browsers */
background: -moz-linear-gradient(top, #FFE5E5 13%, #FAB6B6 76%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#FFE5E5), color-stop(76%,#FAB6B6)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE5E5', endColorstr='#FAB6B6',GradientType=0 ); /* ie */
margin: 30px 0px 0px -40px; z-index: 2;
}
#bubnav .si {
background: #EBBA86; /* old browsers */
background: -moz-linear-gradient(top, #FFE5C6 13%, #EBBA86 76%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#FFE5C6), color-stop(76%,#EBBA86)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFE5C6', endColorstr='#EBBA86',GradientType=0 ); /* ie */
margin: 50px 0px 0px -20px;
}

Pseduo :after
Pernah dengen Pseduo :after? Biasanya digunakan untuk membuat item tambahan tanpa ngebuat tag html baru, jadi lebih praktis dan simpel. Kalo di tutorial ini, pseduo :after ditambahkan untuk membuat segitiga.

• Home Halaman utama

/* balloon effect */
#bubnav .ho:after {
border-color: #9FF276 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .fo:after {
border-color: #BAD7DE transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .co:after {
border-color: #E7EB86 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .po:after {
border-color: #FAB6B6 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}
#bubnav .si:after {
border-color: #EBBA86 transparent;
border-style: solid;
border-width: 30px 30px 0px;
bottom: -10px;
content: '';
display: block;
height: 0px;
left: 15px;
position: absolute;
width: 0px;
z-index: -2;
}

Hover State
Ini adalah efek menu kalau dihover (pada saat mouse berada diatas menu). Rencana awalnya sih tiap menu ganti warna sesuai warna awalnya. Tapi karena agak ribet, sementara cuma bisa 1 warna. Terus di baris ini juga terdapat styling untuk merubah posisi menu (agak keatas) kalo dihover.

• Home Halaman utama

/* hover state */
#bubnav li:hover {
background: #BFFFE8; /* old browsers */
background: -moz-linear-gradient(top, #BFFFE8 13%, #86E3C7 76%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#BFFFE8), color-stop(76%,#86E3C7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFFFE8', endColorstr='#86E3C7',GradientType=0 ); /* ie */
}

#bubnav li:hover:after {border-color: #86E3C7 transparent;}
#bubnav li a:hover {color: #636363;}
#bubnav .ho:hover {margin-top: 35px;}
#bubnav .fo:hover {margin-top: -5px;}
#bubnav .co:hover {margin-top: 65px}
#bubnav .po:hover {margin-top: 25px;}
#bubnav .si:hover {margin-top: 45px;}

---------------

DEMO

Nah, itu dia tutorial Balloon Style Navigation Menu. Kesulitan? Saya siap membantu :D Wassalamu'alaykum :)  </zep>