TERIMA KASIH ATAS KUNJUNGAN ANDA, SAYA HANYA BISA MEMBERIKAN PENYALURAN YANG SINGKAT DAN SEDERHANA, SEMOGA BERMANFAAT

http;//jimmyamba.blogspot.com/

Selasa, 27 Juli 2010

Membuat Dropdown Pada Horizontal Menu


dropdown horizontal 
menu
Diposting trik blogger terdahulu saya telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya saya jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

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>
    &lt;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;
}


Selamat berdropdown dengan menu horizontal...

4 komentar:

Creasy Slamet mengatakan...

Thanks mas menu navigasi saya sudah jadi,...blog sampean sangat mmbantu, tapi sayangnya sub menuny setiap kali mau saya klik kok hilang ya bagaimana solusinya

Creasy Slamet mengatakan...

kasih tau dong biar dropdown biar keren seperti punya mas, lau bisa tampilan menunya seperti yang ada di profile sampean bisa berputar2....

Toko Ayba mengatakan...

Mas tolong dilihat my blog ya, http://tokoayba.blogspot.com Knpa dropdown yang aku dapat dari cara blog sampean kok sub menunya ga bisa diklik ya, setiap mau klik selalu hilang bgmana solusinya

Creasy Slamet mengatakan...

Thanks dah berkunjung di blog I, silahkan lihat cara buat drop down disitu ikuti ja langkah-langkahnya

Prev Prev Prev
 

Lencana Facebook

Page Group