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 Punakawan Digital Media since Oct 2017. Before I came to Punakawan, I was doing IT Supportt and web content at Seratus Company, 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 Website Developer 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.

11 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

  5. Kok gua suka sama tutorialnya sih, simple, dan mudah dimengerti, btw gua pemula 🙁 akhirnya dapet web tutorial yg pas :(((

    • Tq udah dibilang simple… Intinya sih 1 yg simpelnya,disitu gw pakein float: left… Padahal cukup display: inline-block; juga udah horizontal 😉

Leave a Reply