CSS3: Balloon Style Navigation Menu

Oke kali ini Kak Mau Saya tentang trik blog,,yaitu Ballon Style Navigation! menunya keren bangetz,,sampai aku langsung Fresh Gitu ^_^ Oke langsung saja ke TKP :

• 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. Oiya, jangan lupa dipisah ya, 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
Namanya menu navigasi pasti ada linknya dong. Nah disini juga ada deskripsi untuk tiap link. Misalnya link "Home" dikasih deskripsi "Beranda", dan sebagainya. Oke, lanjut aja kalo penasaran :)

• 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 Balloonizingnya. Disini balonnya pake background gradient, CSS3 (bisa kamu dapet disini 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 keren :)

• 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 digunain buat bikin item tambahan tanpa ngebuat tag html baru, jadi lebih praktis. Kalo di tutorial ini, pseduo :after ditambahin buat bikin 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
Nah ini adalah efek menu kalo dihover (pada saat mouse berada diatas menu). Niat awalnya sih tiap menu ganti warna sesuai warna awalnya. Tapi karena agak ribet, jadi 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 Naigation Menu. Kesulitan? Jangan ragu untuk bertanya, Salam Blogger :D

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Cadangan Doang. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Cadangan Doang dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Gojek Ewako pada tanggal 12/10/12