Membuat Menu Dropdown Sederhana Dengan CSS

Membuat Menu Dropdown Sederhana Dengan CSS

Membuat Menu Dropdown Sederhana Dengan CSS, Itulah judul yang kita bahas pada tutorial ini, untuk melengkapi tutorial web design lengkap bahasa indonesia di www.malasngoding.com.

Menu dropdown adalah salah satu fitur yang paling populer pada website. sejak jaman dulu menu dropdown sudah digunakan hampir di setiap template website. karena fungsi nya yang sangat berguna pada sebuah halaman website.

Diantaranya adalah sebagai petunjuk atau arahan halaman pada sebuah website. contohnya pada menu terdapat beberapa link atau hyperlink yaitu misalnya home, tentang, kontak kami, tutorial dan lain-lain.

Tidak hanya itu, menu juga dapat di buat memiliki anak atau memiliki sub menu. misalnya kita memiliki sebuah induk menu yang bernama “Tutorial”. nah kemudian di dalam menu tutorial tersebut kita bisa membuat anak-anak menunya seperti HTML, CSS. PHP dan lain-lain.

Jadi pada saat pengunjung website meletakkan cursor pada menu “Tutorial” atau meng-klik pada menu “Tutorial“, maka sub menunya akan tampil.

Pasti teman-teman penasaran Cara Membuat Menu Dropdown Dengan CSS. pada tutorial ini akan kita bahas tuntas tentang Cara Membuat Menu Dropdown Sederhana Dengan CSS. Langsung saja di simak.

Membuat Menu Dropdown Sederhana Dengan CSS

Untuk membuat menu dropdown dengan html dan css, langsung saja sediakan sebuah file html atau php terserah pada teman-teman.

Di sini saya hanya membuatnya pada file html. saya membuat sebuah file dengan nama menu.html.

menu.html

Perhatikan pada file menu.html di atas, untuk membuat menu dropdown, element HTML yang kita gunakan adalah element <ul> <li> . ul dan li adalah element HTML untuk membuat list pada HTML atau halaman website.

Tutorial membuat list pada HTML juga sudah di bahas pada tutorial sebelumnya.

BACA : https://www.malasngoding.com/belajar-html-membuat-list-pada-html/

Selanjutnya kita menerapkan CSS nya,

Saya yakin semua syntax CSS di atas teman-teman pasti sudah mengerti. karena pasti teman-teman sudah mempelajarinya di TUTORIAL CSS di www.malasngoding.com.

Hanya inti cara membuat dropdown menu nya saja yang akan saya bahas.

Inti dari membuat dropdown menu adalah pada

sub menu atau class “isi-dropdown” awalnya kita set dengan css “display:none”. agar sub menu nya tidak terlihat. dan seperti syntax di atas, pada saat element li yang memiliki class “dropdown” di letakkan cursor mouse di atasnya, maka element sub menu (.isi-dropdown) kita perintahkan untuk muncul dengan syntax di atas ( display : block ).

Coba kita jalankan pada browser dan lihat hasil dari menu dropdown sederhana yang telah kita buat ini.

membuat menu dropdown sederhana dengan css

nah teman-teman tinggal menerapkan syntax menu dropdown di atas pada aplikasi atau website teman-teman.

Berikut demonya saya buat di codepen.io, untuk memudahkan teman-teman untuk mempelajari dan mengutak-atik nya lagi.

See the Pen Membuat menu dropdown sederhana by Malas Ngoding (@malasngoding) on CodePen.0

DEMO

DOWNLOAD SOURCE CODE

Oke sekian Tutorial Membuat Menu Dropdown Sederhana Dengan CSS, semoga dapat bermanfaat.