Menu Click Dropline Vertikal adalah variasi dari menu dropline vertical. Bedanya menu yang satu ini bisa menyembunyikan sub menu dan kemudian akan muncul jika di klik persis dibawah menu utama dan terpapar secara horizontal. Menu Click Dropline vertical selain mempercantik tampilan menu, meminimalisir tempat juga merupakan cara untuk membuat variasi menu di halamana web blog.
Sebenarnya menu ini sangat tepat buat website, tetapi jika ingin membuat menu ini ke halaman blog, sama bagusnya. Menu vertical ini dibagun menggunakan kode CSS, tanpa kode Javascript, jadi browser tidak butuh waktu yang lama untuk menunggu isi menu diloading dari server terntentu. Menu Click Dropline Vertical akan tampil ekspres secepat kilat. Dan jangan kuatir, semua browser bisa membaca dengan baik dan akan menampilkan hasil yang tidak berbeda.
Inilah menu yang kita maksud:
Jika ingin mengaplikasikan menu click dropline vertical ke dalam web atau blog berikut ini kodenya.
Pertama, Kode CSS Untuk Browser.
Kedua Kode CSS Untuk Tampilan Menu:
Kode Html Buat Menu:
Cara Untuk Mengaplikasikan Ke blog anda.
Tentu saja kode ini masih mentah karena link belum tersedia seperti yang anda inginkan. Tapi untuk membuat link itu seperti yang anda inginkan, hanya perlu menambahkan link pada list item yang ada.
Itu saja. Selamat mencoba...
Sebenarnya menu ini sangat tepat buat website, tetapi jika ingin membuat menu ini ke halaman blog, sama bagusnya. Menu vertical ini dibagun menggunakan kode CSS, tanpa kode Javascript, jadi browser tidak butuh waktu yang lama untuk menunggu isi menu diloading dari server terntentu. Menu Click Dropline Vertical akan tampil ekspres secepat kilat. Dan jangan kuatir, semua browser bisa membaca dengan baik dan akan menampilkan hasil yang tidak berbeda.
Inilah menu yang kita maksud:
Jika ingin mengaplikasikan menu click dropline vertical ke dalam web atau blog berikut ini kodenya.
Pertama, Kode CSS Untuk Browser.
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
#Kacangkedele {position:relative; height:300px; width:150px; margin:0 auto;}
/* Untuk Internet Explorer gunanya untuk menekan :active + ul */
#menu li a,
body {behavior:url(http://wisencare.blogspot.com)}
/* style umum */
#menu, #menu ul {padding:0; margin:0; list-style:none; width:150px;}
#menu {padding:10px 0; background:#069; border:5px solid #036; position:absolute;
bottom:0;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-reflect: below 3px -webkit-gradient(linear, left bottom, left top,
from(rgba(255,255,255,0.5)), to(transparent));
}
#menu li {display:inline;}
#menu li {*float:left;} /* Untuk IE7 Gunanya untuk menghapus jarak antar item */
#menu li a {display:block; width:150px; line-height:30px; background:#069;
color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:13px;
text-align:center; font-weight:bold; outline:0;}
#menu li:hover > a {background:#036;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#menu ul {background:#69c; height:0; overflow:hidden;
-ms-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
#menu ul li a {background:#69c; font-weight:normal; font-size:12px;}
#menu ul li a:hover {background:#58b;
-ms-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#menu li a:active {background:#036;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#menu li a:active + ul {padding:0 0 10px 0;}
#menu li a:active + ul.sub3 {height:90px;}
#menu li a:active + ul.sub4 {height:120px;}
#menu li a:active + ul.sub5 {height:150px;}
#menu li a:focus {background:#036;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#menu li a:focus + ul {padding:0 0 10px 0;}
#menu li a:focus + ul.sub3 {height:90px;}
#menu li a:focus + ul.sub4 {height:120px;}
#menu li a:focus + ul.sub5 {height:150px;}
#menu li ul:hover {padding:0 0 10px 0;}
#menu li ul.sub3:hover {height:90px;}
#menu li ul.sub4:hover {height:120px;}
#menu li ul.sub5:hover {height:150px;}
Kedua Kode CSS Untuk Tampilan Menu:
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
body, #wortel a,
html {behavior:url(http://wisencare.blogspot.com)}
#wortel {height:35px; position:relative; text-align:center; width:750px; margin:0 auto; z-index:100; font-family:arial, sans-serif; font-size:12px; position:relative; background:#069;
-ms-border-radius: 35px 25px 0 0;
-moz-border-radius: 35px 35px 0 0;
border-radius: 35px 35px 0 0;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
}
#wortel, #wortel ul {padding:0; margin:0; list-style:none;}
#wortel li {display:inline;}
#wortel li a {display:inline-block; line-height:35px; padding:0 20px;
background:#069; color:#fff; text-decoration:none; font-weight:bold;
-ms-border-radius: 35px 35px 0 0;
-moz-border-radius: 35px 35px 0 0;
border-radius: 35px 35px 0 0;
}
#wortel ul {position:absolute; left:-9999px; width:750px; top:35px;
text-align:center; height:35px; background:#69c; display:inline-block;
-ms-border-radius: 0 0 35px 35px;
-moz-border-radius: 0 0 35px 35px;
border-radius: 0 0 35px 35px;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
}
#wortel ul li a {background:#69c;
-ms-border-radius: 35px 35px 0 0;
-moz-border-radius: 35px 35px 0 0;
border-radius: 35px 35px 0 0;
}
#wortel ul li a:hover {background:#7ad;}
#wortel li a:active {outline:none; background:#69c;}
#wortel li a:active + ul {left:0; border:0;}
#wortel a:focus {outline:0; background:#69c;}
#wortel a:focus + ul {left:0;}
#wortel ul:hover {left:0;}
Kode Html Buat Menu:
<div id="Kacangkedele">
<ul id="menu">
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="1">Products</a>
<ul class="sub4">
<li><a href="/">Kacang Tanah</a></li>
<li><a href="/">Kacang Polong</a></li>
<li><a href="/">Kacang Panjang</a></li>
<li><a href="/">Kacang Ijo</a></li>
</ul>
</li>
<li><a href="#" tabindex="1">Services</a>
<ul class="sub5">
<li><a href="/">Bengkel Sepeda</a></li>
<li><a href="/">Bengkel Las</a></li>
<li><a href="/">Bengkel Mobil</a></li>
<li><a href="/">Bengkel Pesawat</a></li>
<li><a href="/">Bengkel Roket</a></li>
</ul>
</li>
<li><a href="#" tabindex="1">Melayani Kota Unik</a>
<ul class="#">
<li><a href="/">Malang</a></li>
<li><a href="/">Balik Papan</a></li>
<li><a href="/">Sama Rinda</a></li>
<li><a href="/">Mana do</a></li>
</ul>
</li>
<li><a href="#" tabindex="1">Kota Unik</a>
<ul class="sub3">
<li><a href="/">Suka Bumi</a></li>
<li><a href="/">Suka Mandi</a></li>
<li><a href="/">Suka Suka</a></li>
</ul>
</li>
</ul>
</div>
Cara Untuk Mengaplikasikan Ke blog anda.
Masukkan kedua kelompok kode CSS di atas (Kode CSS Untuk BrowserKode dan CSS Untuk Tampilan Menu) kedalam CSS blog anda.
Login ke blog anda >> Element Halaman >> Edit HTML. Sebelumnya save dulu template anda untuk menghindari kemungkinan salah edit. Lalu letakkan kode di CSS kedalam template anda bersama kelompok kode CSS lainnya. Tempatnya sebelum /skin. Kopi dan paste kode CSS, kemudian save template anda.- Kopi paste kode HTML Buat Menu ketempat dimana yang anda inginkan. Klik Elemen Halaman lalu Add Widget Html/Javascript. Tempatkan kode ini di sidebar. Save dan lihat hasilnya.
Tentu saja kode ini masih mentah karena link belum tersedia seperti yang anda inginkan. Tapi untuk membuat link itu seperti yang anda inginkan, hanya perlu menambahkan link pada list item yang ada.
Itu saja. Selamat mencoba...