Menambah Dropdown Menu dalam Horizontal Navigasi

Menambah Dropdown Menu dalam Horizontal Navigasi
Diposting trik blogger terdahulu banditz telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut yang menyankut postingan kemarin "Menu Turunan dalam Horizontal Navigasi Kode CSS"ada yang tanya mas mohon lebih jelas ok bandit akan menerangkan kembali



Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

* Login ke account blogger kamu.
* Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

* Cari kode HTML di bawah ini yang posisinya diantara<body> ... <body>.
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>


Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

* Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum

</li>
.
<ul>
<li><a href='URL sub 1'>Sub menu 1</a></li>
<li><a href='
URL sub 2'>Sub menu 2</a></li>
<li><a href='
URL sub 3'>Sub menu 3</a></li>
</ul>





Contoh :

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a>
<ul>
<li><a href='URL sub 1'>Sub menu 1</a></li>
<li><a href='URL sub 2'>Sub menu 2</a></li>
<li><a href='URL sub 3'>Sub menu 3</a></li>

</ul>
</li>
<li><a href='http://Link_yang_dituju'>
Add Link</a></li>
<li><a href='
http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna
hijau.
2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

Jangan lupa disimpan.
Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->

width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->

float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->

border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->

border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->

<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode
border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->

padding: 7px 30px 7px 10px;
}




2 comments

avatar
×

terima kasih sudah berbagi sobat..ini pengaruh ul dan li ya sob..aku kadang masih bingung

avatar
×

ok sob betul sama sama