Membuat Dropdown Menu dengan CSS

Membuat dropdown menu dengan CSS bisa dibilang gampang-gampang susah, tapi kalau sudah tahu bagaimana cara pembuatannya anda pasti berkata “Eh ternyata mudah juga yah”. So, pada tutorial kali ini saya akan menjelaskan bagaimana cara pembuatan dropdown menu dengan menggunakan CSS mulai dari proses pembuatan markup HTML sampai pemberian Style.

Jika anda belum tahu apa itu dropdown menu, perhatikan screenshot berikut atau perhatikan menu yang terdapat dalam situs ini

Demonstrasi Download

Markup HTML

Pertama-tama kita buat markup HTML untuk dropdown menu kita

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">Javascript</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">Javascript</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Markup di atas adalah markup yang sesuai dengan aturan semantik. Kita menggunakan tag nav untuk mendefinisikan bahwa markup di dalamnya adalah link-link navigasi. Jika anda mau, anda dapat menambahkan id atau class pada nav tersebut sebagai referensi kita untuk CSS ato javascript.

Pemberian CSS

Pertama-tama kita beri style untuk ul seperti berikut :

*{ 
	margin:0;
	padding:0;
	font-family:sans-serif;
} /* simple CSS Reset */

nav ul {
	list-style:none;
	background-image:-webkit-linear-gradient(top,#EBEBEB,#D7D7D7);
	background-color:#EBEBEB;
	box-shadow:0 1px 3px rgba(0,0,0,.5);
}
nav ul:after{
	content:" ";
	display:block;
	clear:both;
}

Dalam kode tersebut, kita hilangkan symbol lingkaran yang akan muncul pada ul, lalu pada bagian ul:after ini adalah solusi untuk permasalahan floating (meng-clearkan area yang memiliki floating). Kenapa bukan solusi overflow:hidden? karena kita akan memiliki submenu yang tentunya keluar dari layout menu utama dan jika kita menggunakan solusi overflow:hidden, maka submenunya akan tersembunyi.

Sedikit sentuhan dengan memberikan background gradient (baca artikel bermain-main dengan CSS3 gradient) dan box-shadow (baca juga artikel bermain-main dengan CSS3 box-shadow)

nav ul li{
	float:left;
	position:relative;
}

nav ul li a{
	color:#111;
	display:block;
	font-size:12px;
	padding:3px 20px;
	text-decoration:none;
}



Selanjutnya kita beri floating left (agar menu berjejer kesamping) pada li dan memberikan position relative karena dalam li ini akan ada element yang memiliki position absolute yakni ul untuk submenu. Kita juga berikan style untuk linknya dengan menghilangkan garis bawah dan memberikan padding agar menu tidak terlalu berdempetan.

nav ul ul{
	position:absolute;
	top:100%;
	background:white;
}
nav ul ul li{
	float:none;
}

Selector tersebut akan memilih ul yang terdapat dalam menu utama atau ul untuk submenu. Seperti saya sebutkan sebelumnya, kita tambahkan position absolute, agar posisi submenu bisa kita atur dengan mudah. penambahan top:100% berfungsi untuk menempatkan sub menu tepat dibawah menu utama (100% tinggi dari menu utama).

Kita juga mereset floating untuk li karena akan memiliki floating yang diturunkan dari style sebelumnya (Agar submenu ditampilkan kembali menurun ke bawah).

Karena submenu seharusnya tersembunyi dan hanya muncul ketika kita meng-hover pada menu yang memiliki sub, maka kita sembunyikan terlebih dahulu ul untuk sub menu ini. Tambahkan display:none pada selector nav ul ul :

nav ul ul{
	position:absolute;
	top:100%;
	display:none; /* sembunyikan sub menu */
}

Untuk menampilkan sub menu ketika li/menu yang bersangkutan di hover, maka kita gunakan selector seperti berikut :

nav ul li:hover > ul{
	display:block;
}

Sejauh ini dropdown menu kita sudah hampir selesai, coba anda buka dalam browser lalu hover menu blog. Sub menu untuk menu blogpun akan muncul.
Kita tambahkan sedikit polesan warna ketika link menu di hover, tambahkan style berikut :

nav ul li:hover > a, nav ul ul li:hover > a  {
	color :white;
	background-image:-webkit-linear-gradient(top, #506def,#2041DE);
	background-color:#506def;
}

Jika style yang diberikan sampai sini, maka menu kita hanya terbatas pada satu submenu (submenu selanjutnya akan ditampilkan dibawah, bukan disamping submenu), agar menu yang kita buat bisa memiliki sub-sub menu lagi di dalamnya (dan ditampilkan di sebelah submen), tambahkan style berikut :

nav ul ul ul{
	position:absolute;
	left:100%;
	top:0;
}	

IE8

Ok, kebetulan saya ada Internet Explorer 8 (bukan kebetulan kali, emang udah ada dari dulu), saya coba test dengan browser jadul ini dan apa yang terjadi adalah, semua hasil styling kita tidak bekerja!. Ini dikarenakan kita menggunakan tag HTML5 yang belum didukung oleh IE8 ke bawah, coba tag apa? Ya.. tag nav. Tag nav dan tag-tag HTML5 lainnya tidak akan dibuat oleh IE8 ke bawah. Permasalahannya hanyalah pada tag nav ini. silahkan coba ganti nav dengan div dan ubah pula cssnya (ganti nav menjadi div) masalahpun terselesaikan.

Namun agar kita dapat menggunakan HTML5, Saya akan menggunakan library IE9.js. Library ini akan memberikan kemampuan (sedikit kemampuan) agar browser jadul seperti IE8 ke bawah ini mampu menampilkan HTML5 atau bertingkah seperti browser modern. Download script IE9.js disini http://code.google.com/p/ie7-js/ dan tempatkan di folder proyek kita.

Setelah didownload, tambahkan kode berikut tepat sebelum penutup tag head.

<!--[if lt IE 9]>
<script src="IE9.js"></script>
<![endif]-->

Kode diatas merupakan Conditional Tag yang artinya kira-kira seperti berikut : “Jika browser IE yang digunakan versinya lebih rendah dari Internet Explorer 9 maka sertakan file javasript IE9.js”.

Sedikit fix, ketika anda coba tampilkan kembali maka akan ada jarak antara nav dengan browser (ada margin-top), tambahkan style berikut agar menu menempel pada browser :

nav{ margin-top:0; }

Yes, masalah terselesaikan. Saya belum test untuk IE7 ke bawah atau Firefox versi lama. gak apa-apa, lagi pula populasi pengguna browser tersebut sedikit-demi sedikit sudah menurun.

Demonstrasi Download

Kesimpulan

Contoh kasus pembuatan dropdown menu di atas dapat anda kembangkan kembali sesuai dengan project yang sedang anda kerjakan, Seperti merubah padding atau merubah warnanya. Untuk setiap menu yang memiliki struktur HTML yang sama, anda masih bisa menggunakan style ini sampai kapanpun. Diakhir tutorial, saya juga menyertakan fix untuk browser lama seperti IE8. Solusi tersebut bisa dijadikan pegangan meskipun tidak semua browser lama dapat berperilaku seperti browser modern dengan sempurna.

Sumber Inspirasi

Category HTML & CSSTag , , , ,

39 Komentar untuk “Membuat Dropdown Menu dengan CSS

  1. lanjut bertanya buat apa
    bagian

    nav ul ul li

    di kasih none ?
    saya hilangkan atw ganti nilai nya tidak ada perubahan yg terjadi

    *{ margin:0; padding:0; font-family:sans-serif;
    }
    nav ul {
    list-style:none;
    background-image:-moz-linear-gradient(top,#EBEBEB,#D7D7D7);
    box-shadow:0 1px 3px rgba(0,0,0,.5);
    }
    nav ul:after {
    content:” “;
    display:block;
    clear:both;
    }
    nav ul li {
    float:left;
    position:relative;
    }
    nav ul li a{
    text-decoration:none;
    color:black;
    padding:10px 20px;
    font-size:14px;
    display:block;
    background-color:yellow;
    -moz-transition: .40s color ease-in, .40s background-color ease-in;
    }
    nav ul li a:hover {
    background-color:red;
    }
    nav ul ul {
    position:absolute;
    top:100%;
    display:none;

    }
    nav ul ul li {
    float:left;
    width:170px;
    }
    nav ul ul li a:hover {
    background-color:blue;
    }
    nav ul li:hover > ul {
    display:block;
    }

    HOME
    Service

    Laundry
    Koki mask
    antar jemput anak
    Dekorasi Rumah

    Produk

    Brosur katalog
    Baju J-flex
    Tas Helmer

    Penjualan
    Kontak Kami

    1. haha.. kepanjangan.. maksud dari float:none pada nav ul ul li itu adalah untuk menghilangkan float:left dari style sebelumnya.

      Coba kamu ubah lebar dari nav ul ul nya menjadi 500px misalnya :

      nav ul ul{
      width:500px;
      }

      Perhatikan jika menunya masih ditampilkan horizontal, karena linya mewarisi sifat floating dari style sebelumnya. maka dari itu kita perlu membersihkan float:leftnya dengan float:none.

      1. yap saya mengerti sekarang jad sub li nya masih megikuti float:left yg ada di
        nav ul li

        jadi karna kita maw bwt nav ul ul li jadi vertikal kita harus tambhkan
        float:none di nav ul ul li nya
        benar gk ??

        dan apa maksud dr ini ?

        nav ul:after{
        content:” “;
        display:block;
        clear:both;

        sy blm ngeri penggunaan after dan before 🙂

      2. :after dan :before merupakan pseudo-element. secara bahasa bisa diartikan mirip elemen (tag HTML). kedua selector ini mampu membuat element HTML, namun tidak ada markup HTMLnya (makanya disebut pseudo).

        misalnya kamu punya sebuah div, dan jika kamu buat pseudo-element :before pada div tersebut seperti berikut :

        div:before{ content: “bla..bla..bla”; }

        maka seolah-olah sebelum div tersebut terdapat sebuah tag HTML, namun tidak ada. 🙂

        <pseudo-before>bla..bla..bla</pseudo>
        <div></div>

        Pada contoh kasus di atas, saya mengimplementasikan pseudo-element untuk membuat element yang berfungsi men-clear-kan floating. Jadi kamu tidak perlu menambahkan lagi tag html seperti :

        <div class=”clear”></div>
        <br class=”clear”>
        <div style=”clear:both”></div>

        Dengan demikian, dokumen HTML lebih bersih dari-tag-tag yang tidak perlu dan hanya mengcaukan nilai semantiknya 🙂

      3. wahhhh…

        :2thumbup buat penjelasan mas rian.

        paham juga akhirnya mengenai :before :after. ahahaahh

        mas rian nih ibarat tutornya webdesign.tuts atau net.tuts tp versi lokalnya..

        badai ngejelasinnya 😀

        ohh ya,

        emang masih ada pengguna IE8 atau ke bawah yah?

        nyampe kita harus masukin script IE9.js

    1. Cara sederhananya ya tinggal disisipin gambar aja di linknya. misalnya seperti ini :


      <li><a href=”…”><img src=”icon.png”> Menu</a></li>

      sebelumnya kamu siapin dulu icon/gambar yang mau dipake. 🙂

  2. bagus banget makasih . saya mau tanya dong mas gmna cara bikin menu agar menu nya itu ga bisa turun ke bawah dan naik ke atas ??

  3. Permisi ka mau tanya nih. bagaimana cara untuk membuat header dan footer tidak berganti saat kita meng-klik link(script) yang selanjutnya? Mohon dibales ka

    1. kalo yang kaya dimerdeka itu jenisnya Megamenu (coba kamu cari2 tetang megamenu, pasti banya), sama aja sih pembuatannya, cuman buat submenunya kamu bisa pake div aja. ntar si div itu yang diatur agar melebar.

  4. kalau saya mau buat isi dropdownnya nama2 provinsi gimana om, kaya toko bagus kalau pakai yg itukan enggak cukup om nanti ada yang enggak keliatan

  5. Bang ari, gimana kalo dropdownnya kebalik.. Jadi menunya ada dibawah, trus submenu munculnya dari bawah keatas, saat submenu dihover kesamping..Saya coba nerapin punya bang ari malah jadinya berantakan..
    Mohon pencerahannya

    1. Gampang aja, tinggal main di class sama style dikit

      misal untuk sub-menu level pertama, yang asalnya topnya 100% dihapus, diganti jadi bottom 100%.

      kemudian untuk submenu level ke tiga dst, sekarang ganti arah, yang harusnya turun jadi naik kan? hapus top:0 ganti jadi bottom: 0

  6. Mas rian, mau tanya klo isi dari menu itu terdiri dari banyak link itu gimana caranya mas??
    jadi kita gk usah bikin sub menu ,tapi semua sudah tergabung dalam 1 menu. kaya di blog nya mas rian ini, di menu “tutorial” terdiri dari ( menu html& css,tips&trik,wordpress) dan isi dari html & css itu sendiri ada banyak link..
    gimana ya mas cara nya???

    makasih sebelumnya, maap masih pemula mas 🙁

  7. Mas Rian, saya newbie amatir yang belajar membuat website.. saya mau nanya, kenapa ya di samping tampilan menu saya ada tanda tanya. Seharusnya itu tanda panah ke bawah yang menunjukkan memiliki sub-menu. tapi di tampilan saya menjadi tanda tanya. terima kasih atas ilmunya.

  8. Mantap, penjelasannya jelas…
    Mau tanya nih, bagaimana caranya jika ingin navbar menu kita tetap diatas walaupun discroll kebawah..kalo pake position:fixed, background untuk navbarnya tidak full, hanya mengikuti luas sesuai jumlah menunya.
    Mohon pencerahannya 🙂

  9. Satu lagi ya min pertanyaannya hehe..
    Dibawah navbar,,saya ingin tambahkan content web, semacam artikel…setelah saya tambahkan div untuk content, kok munculnya nggak dibawah navbar, tapi di belakang navbar..mohon pencerahannya ya min, thanks 🙂

Tinggalkan Komentar Anda