Kreativitas - Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali
ini Julak mau berbagi tentang cara membuat menu navigasi dropdown
vertikal, Sobat bisa lihat di sidebar kanan sebagai contohnya. Caranya
cukup mudah hanya tinggal memasukkan kode ke dalam gadget. Menu vertikal
ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan
ke menu.
Berikut kodenya
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 115px;
}
</style>
<nav>
<div class="menu-item">
<h4><a href="http://namablog.com" target="_blank"">Membuat Blog</a></h4>
<ul>
<li><a href="http://namablog.com" target="_blank">Membuat Email </a></li>
<li><a href="http://namablog.com" target="_blank">Membuat tabel </a></li>
<li><a href="http://namablog.com" target="_blank">Promosi Blog</a></li>
<li><a href="http://namablog.com" target="_blank">Setelan Blogger</a></li>
<li><a href="http://namablog.com" target="_blank"> Membuat Gmail</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="masukkan URL/Link postingan">Widget</a></h4>
<ul>
<li><a href="masukkan URL " target="_blank">Cara Pasang widget</a></li>
<li><a href="masukkan URL " target="_blank">Cara Buat Laman Statis</a></li>
<li><a href="masukkan URL " target="_blank">Cara Ganti Favicon</a></li>
<li><a href="masukkan URL " target="_blank">Ganti Template Blog</a></li>
<li><a href="masukkan URL " target="_blank">Cara Ubah Background Blog</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="masukkan URL/Link postingan disini" target="_blank"">Widget</a></h4>
<ul>
<li><a href="masukkan URL disini" target="_blank">Cara Pasang Gadget</a></li>
<li><a href="masukkan URL disini" target="_blank">Menu Vertikal</a></li>
<li><a href="masukkan URL disini" target="_blank">Cara Ganti Favicon</a></li>
<li><a href="masukkan URL disini" target="_blank">Ganti Template Blog</a></li>
<li><a href="masukkan URL disini" target="_blank">Ubah Background Blog</a></li>
</ul>
</div>
</nav>
Cara memasang
1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript
2. Masukkan kode di atas.
Yang perlu sobat perhatikan antara lain;
1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.
2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu,
hehe maklum). Jika sobat mengisi dengan 6 Link, gak
bakalan tampil semua.
3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri
warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post
4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.
5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A;
6. Selamat Mencoba.
Selamat Mencoba
sumber : http://www.super-gaptek.com/2012/12/cara-membuat-menu-vertikal-di-blog.html
Ditulis Oleh : Unknown
Anda sedang membaca artikel Cara Membuat Menu Vertikal di Blog. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran dapat Anda sampaikan melalui kotak komentar dibawah ini. Bagi Anda yang ingin menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya.
0 komentar:
Post a Comment