TIPS Membuat Drop Down Menu - part 2

by Ratna Amalia - September 04, 2015

Maaf ya, setelah hampir dua minggu, baru ketulis bagian kedua TIPS Membuat Dropdown Menu.

Ngulang sedikit postingan lalu. Efek kegalaun dalam menentukan saya ini blogger apa [Baca juga Tentang Niche Blogger vs Life Style Blogger] nampak nyata dalam penentuan kategori artikel. Daripada galau berkepanjangan, akhirnya saya tetapkan untuk tetap melanjutkan kesenangan menulis apa saja seperti biasa dan memilih merapihkan tampilan kategori menjadi Drop Down Menu. Aha !

Boleh dibilang nekat secara saya ngga punya basic soal programming atau coding apalagi CSS. But curiosity beats everything. Saya pun mulai browsingdan berdasarkan hasil berbagai rupa drop down menu tutorial yang saya temukan, inilah cara yang saya pilih.

Di postingan bagian pertama sudah disinggung alasan kenapa kita perlu menganalisa tema tulisan yang sering kita posting. Singkatnya, untuk memberikan gambaran pada kita sendiri, menu apa saja yang akan tetapkan.

Jadi setelah menganalisa sendiri tema tulisan yang sering dibuat, ternyata selain suka bercerita tentang perjalanan, saya juga sering sharing tentang blogging, sesekali mengulas buku yang saya baca, film yang saya tonton dan produk. Bahkan kadang secara gak tahu diri ngomongin tentang fotografi padahal kemampuannya masih cetek (hihi).

Dan kesimpulannya adalah ini;

Sering posting tentang teknologi dari sudut pandang perempuan gaptek a.k.a saya ^_^ . Kategori ini saya beri judul Women & Tech
Tulisan tentang perjalanan termasuk jelajah rasa alias makanan, saya kategorikan sebagai Travelogue
Ulasan buku, film dan produk --> Review
Kegemaran memotret dan keisengan dengan handicraft --> Hobbies.
Sharing pengalaman seru jadi orang tua --> Mom's Chronicle.
Yang terakhir, cerita serunya kegiatan blogging yang bersifat publicist seperti undangan blogger atau lomba saya buat dalam kategori Event.

Semua itu diistilahkan sebagai Level 1

Karena saya juga masih ingin membuat kategori yang lebih spesifik maka dari Level 1 tersebut saya buat juga Level 2 nya. Contohnya untuk kategori Hobbies. Di samping memotret, saya juga suka memasak dan crafty atau kerajinan tangan. Mengingat kedua hal tersebut hanya dilakukan sesekali maka saya putuskan untuk menggabungkan memasak dan crafty menjadi sub-kategori (Level 2) yang dinamakan Do It Yourself, terpisah dari bagian Fotografi.

Begitu juga dengan proses levelling untuk kategori lainnya. Untuk penamaan kategori sesuaikan dengan kondisi dan keinginan masing-masing.

Travelogue dengan sub-menu Travel Story dan Food Story.
Tentang kesukaan memotret dan keisengan dengan handicraft --> Hobbies, sub-menu Fotografi dan Do It Yourself
Selain parenthing, di Kategori Mom's Chronicle ada sub-menu Life. Hal-hal yang tidak termasuk kategori disebut di atas, biasanya saya masukkan di sini. Mirip kategori gado-gado gitu deh ^_^

Pendeknya, try to find category with catchy names, if possible. Bila perlu, blog walking ke laman-laman lain untuk cari inspirasi nama dan referensi. Be creative as much as you can ! Itu yang saya lakukan and I enjoy the process ^_^

Oh ya, Level 2 ini opsional ya. Jika memang dirasa tidak perlu, cukup berhenti di Level 1 saja. Bisa dibilang ini keuntungan belajar CSS. Kita dapat merubahnya sesuai kebutuhan. Kalau di kemudian hari, kategori dalam blog Anda beranak pinak, don't worry, you can simply adjust it.

Jika sudah siap dengan kategori Level 1 dan Level 2 , strukturnya nanti akan nampak seperti ini.

Level 1 Kategori 1

Level 2 Kategori 1 sub-menu A

Level 2 Kategori 1 sub-menu B

Level 1 Kategori 2

Level 2 Kategori 2 sub-menu A

Level 2 Kategori 2 sub-menu B ..... dst

Kalau bertanya dalam hati, kenapa sih sampe susah payah menentukan Level 1 dan Level 2 beserta sub-menunya segala ? Hal tersebut akan memudahkan kita dalam penulisan kodenya nanti.

Pembuatan struktur yang demikian ternyata sangat membantu sekali untuk yang awam seperti saya tapi sok tahu pengen ngerjain sendiri menu drop down seperti ini *kibasjilbab* ^_^

Selesai dengan struktur menu yang Anda inginkan ?

Silahkan petakan dalam codingnya yang bisa Anda copy paste sebagai berikut.

COPY PASTE coding berikut, disarankan kerjakan di file biasa terlebih dahulu.

<li class="sub"><a href='http://www.NAMA-BLOG.com'>Level 1 Kategori 1</a>

<ul>

<li><a href='http://www.NAMA-BLOG.com/search/label/Level 2 sub-menu A'>Level 2 sub-menu A</a></li>