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>

Blunique - Blogger Template

Penting!
Template ini gratis, boleh diedit, dan disebar luaskan sesuai keperluan, dengan catatan tanpa merubah credit.

Karena blog yang lama sudah tidak terpakai, sayang kalau dibuang begiu saja. Kebetulan templatenya lumayan. Nama templatenya Blunique. Gabungan dari kata "Blue" dan "Unique". Memang agak maksa sih... Template minimalis dengan warna dominan biru tua. Konsep desain sederhana yang ditambah beberapa efek CSS3 dan sedikit resource gambar, sehingga terlihat menarik walaupun dengan size yang kecil. Ini template buatan saya saat masih awal belajar desain blog, jadi masih rada jelek.



Template ini dilengkapi dengan: Menu navigasi yang unik; Efek slide pada preview posting di halaman utama; Efek emboss yang menggunakan pengaturan CSS border (sidebar) & trik gambar 1x1 px (footer); Serta threaded system comment dengan admin highlight. Didesain untuk blog yang mengedepankan kualitas konten, karena itu desainnnya dikembalikan ke fungsi semula (header, navigasi, sidebar, dan footer) tanpa menambah fasilitas yang kurang perlu.

Oke, ini dia :

Header dan Menu Navigasi

Header dibuat dengan efek 3D menggunakan CSS3, begitu juga dengan Description/Subheader-nya. Kemudian Menu Navigasi terdapat efek sliding saat di-hover, yang menggunakan efek CSS3 Transition, jadi ketika cursor berada diatas menu, menu akan bergeser seperti pada gambar. Keren kan :D Kekurangannya, nama menu nggak boleh lebih dari 100px. Jadi nama menu harus dibuat sesingkat mungkin. Tiap huruf 13px, tinggal dikalikan.

Untuk mengedit Menu Navigasi, cari kode berikut

<div id='menu'>

Ganti kata yang berwarna merah sesuai dengan kebutuhan. Jika belum terlalu mahir dengan HTML/CSS, akan lebih baik bila menunya jangan ditambah karena bisa overflow.

<ul>
<li><a href="/"><span>Halaman Utama</span>HOME</a></li>
<li><a href="/"><span>Tentang</span>ABOUT</a></li>
<li><a href="/"><span>Hubungi</span>CONTACT</a></li>
<li><a href="/"><span>Isi Blog</span>CONTENT</a></li>
<li><a href="/"><span>Menu Lain</span>OTHERS</a></li>
</ul>

Content Wrapper
Disini adalah bagian posting dan sidebar. Untuk posting di halaman utama terdapat tombol readmore (seperti terlihat pada gambar), thumbnail (gambar pertama dalam posting), dan terdapat comment-bubble (jumlah komentar). Juga ada efek bergeser saat di-hover (Cuma mempercantik sih sebenernya, gak terlalu fungsi banget :P ).

Untuk Sidebar, diberi sedikit sentuhan efek "emboss" dengan memanfaatkan pengaturan CSS Border. Simpel tapi tetep keren :)

Disini juga dilengkapi dengan quote-box. Bisa digunakan untuk kutipan teks atau barisan kode.

<div class='code'> ...isi kode... </div>

Dan ini untuk subjudul

<span class='ti'>....</span>

"ti maksudnya adalah title, biar pendek saja. Bisa diganti css-nya jadi "subjudul" dan sebagainya. Soalnya males upload lagi. Hehe.

Komentar

Seperti yang bisa dilihat pada gambar, disini sudah menggunakan Threaded Comment System. Dan juga ditambah Admin Highlight. Jadi komentar admin akan terlihat berbeda dari komentar pengunjung.

Footer
Untuk Footer, tidak ada yang spesial, 3 kolom dengan garis pinggir menggunakan 2 gambar 1x1 pixel untuk menciptakan kesan emboss.

Pengaturan Format
Agar sesuai dengan desain defaultnya, silahkan atur format blog sesuai dengan yang terlihat pada gambar berikut:

-  -  -  -  -

Tertarik? Silahkan download :)

DEMO

DOWNLOAD

</zep>