Membuat Menu Navigasi Horizontal Dropdown v1
Menu navigasi horizontal dropdown adalah menu yang juga sangat penting bagi blog, karena dapat memudahkan pengunjung suatu blog untuk melihat semua konten yang tersedia dalam suatu blog yang menggunakan menu horizontal dropdown. Menu navigasi ini biasanya untuk menampilkan fitur-fitur dalam blog seperti Tukar Link, Kontak Admin, dan sebagainya.
Secara default, menu horizontal yang disediakan oleh pihak Blogger ini tidak terdapat cabangnya (dropdown). Menu yang merupakan bawaan dari pihak Blogger biasanya disebut dengan Laman. Namun, menu bawaan dari Blogger yang tidak mempunyai dropdown. Hal ini biasanya mengganggu para Blogger karena keterbatasan tempat yang dimiliki menu horizontal.
Solusinya, kita dapat menggunakan menu horizontal dropdown karena memiliki cabang. Jadi, apabila menu utama didekatkan oleh kursor mouse, maka otomatis cabangnya (dropdown) akan terlihat. Sekarang, kita akan membahas cara untuk membuat menu horizontal dropdown tanpa kode CSS (Edit HTML). Sehingga kita akan membuat hanya dalam menu tata letak saja. Ikuti langkah-langkah berikut:
1. Pada dasbor, pindah ke Tata Letak.
2. Klik Tambahkan Gadget (Posisi gadget harus diletakkan tepat dibawah header).
3. Pilih gadget HTML/JavaScript. Letakkan kode berikut:
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='#' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>
Saya dalam tutorial ini apabila Anda tifdak mengubah kodenya, maka menu horizontal dropdown akan sebanyak tiga buah ditambah satu buah menu untuk Beranda (Home). Jika Anda ingin menambah menu dan juga cabangnya (dropdown), tambahkan kode seperti ini tepat dibawah kode </li>.
<li><a href='#' rel='nofollow' target='_blank'>Drop menu</a>Jadi, kode akan terlihat seperti ini:
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a></li>Warna biru= Itu adalah menu dropdown yang sebelum di-edit.
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='#' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 3</a>
</li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='#' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
Warna merah= Itu adalah tampilan kode </li>.
Warna orange= Itu adalah tampilan kode yang akan ditambahkan sebagai menu dropdown.
4. Klik Simpan. Jangan lupa, gadget diletakkan tepat dibawah Header!
0 komentar