Cari Apa Ya: Membuat Dropdown Pada Horizontal Menu

Thursday, June 30, 2011

Membuat Dropdown Pada Horizontal Menu

Posted by Sibuk Banget |

|

Edit Post

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 :

Sebelumnya buat dulu horizontal menu. Silakan buka Membuat Horizontal Menu di blog 2

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; 
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; 
width: 160px; 
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; 
border-left: 1px solid #ffffff; 
border-right: 1px solid #ffffff; 

}
#nav li li a:hover, #nav li li a:active {
background: #c06000; 
padding: 7px 30px 7px 10px;
}

Labels: Tips-Trik Blogger

Cari Apa Ya

Cari sesuatu ? Check diblog ini !

Membuat Dropdown Pada Horizontal Menu

0 comments:

Post a Comment

Blog Archive

About Me