Tutorial membuat menu horizontal dan sub-menu vertical dengan CSS

Bintaro – Ngelanjutin lagi tutorial simple tentang ngebuat menu. Sumonggo yang belom ngintip tutorial awalnya ngebuat menu horizontal di tengok dulu di tulisan gw sebelomnya di http://maswahyu.anshori.net/tutorial-membuat-menu-horizontal-dengan-css/ . Kalo udah ditengok dan diraba2, yuk mari lanjut. Oh iya sebelomnya, tutorial ini masuk ke kelas BEGINNER yah buat para Front-End. Jadinya disimpen dulu emosinya buat yang udah EXPERT di bidang Front-End 😛

1. Siapin dulu HTML n CSS horizontal menu awalnya

HTML

CSS

2. Tambahkan isi TAG UL baru di bagian LI Kategori <li><a href=””>CATEGORY</a>  //ISI DI BAGIAN INI </li>

<ul>
<li><a href=””>Pribadi</a></li>
<li><a href=””>Terdaftar</a></li>
<li><a href=””>Umum</a></li>
</ul>

HTML

PREVIEW
menu2-1

 

3. Tambahin selektor li ul li {clear:both;} di CSS agar subMenu nya itu berubah jadi Vertical. Dimana LI UL LI itu maksudnya adalah menunjuk selektor UL LI didalam selektor LI dengan properti CLEAR:BOTH; yang artinya bagian kiri dan kanannya itu kosong.

CSS

PREVIEW
menu2-2

4. Lanjut ngilangin border kanan di submenu di li ul li tambahin border-right:none;

CSS

PREVIEW
menu2-3

5. Buat selector baru biar submenunya rapet ke kiri ul ul {padding-left:0px;} dan tambahin properti padding-top:5px; di selectorul ul juga biar ada jarak antara menu dengan sub-menunya.

CSS

PREVIEW
menu2-4

6. Sekarang masuk ke tahap ngerapihinnya. Buat submenunya hidden, tambahin properti display:none; di selektor ul ul

CSS

PREVIEW
menu7

7. Bikin fungsi hover biar submenunya ga kehidden ul li:hover > ul {display:block;}

CSS

PREVIEW
menu2-5

8. Yup sekarang rapihin bagian submenunya. Di selektor li ul li tambahin background-color:#ccc; biar li di submennu backgroundnya jadi ikut abu2.

CSS

PREVIEW
menu2-6

Okeh, beres.. Yang gw share cuma garis besarnya aja ya ga sampe ke bener2 styling nya biar manis dan ciamis. Untuk live previewnya biar pas atau gag tutorialnya coba diintip di sini >>> http://anshori.net/coba/menu2/

Untuk pertanyaan bisa di lanjut di maswahyu@anshori.net yah. Sekian dan terima kasih, semoga bermanfaat. Cheeeerrrsss 🙂

About the Author

Anshori Wahyu

My name is Mas Wahyu Anshori, 32 years old. I am a student from STIE Ahmad Dahlan Jakarta, work at Seratus Company since Oct 2012. Before I came to Seratus Company, I was doing web content at Melodia Group and be part of Kehati as a freelance web developer. I was also a freelance web developer with simple HTML, CSS base, jQuery, and PHP. Learned HTML and CSS base (with a help of Google) by myself would be my achievement so far. I’am an Indonesian football junkie, as well as addicted to HTML, CSS and jQuery coding.

9 Comments on "Tutorial membuat menu horizontal dan sub-menu vertical dengan CSS"

  1. Nice info om 😀

  2. nolong bgt ini. nice share gan 😀

  3. Adang Sutisna | 22/02/2016 at 11:39 | Reply

    Keren bro sangan membantu,

    semoga bisa tulis artikel yang lebih keren lagi buat saya belajar hehehe

  4. aku masih belum paham paham cara masukinya

Leave a Reply