Loading...
CSSHTMLTutorialWeb Dev

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 🙂

11 comments
  1. Adang Sutisna

    Keren bro sangan membantu,

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

  2. malfi

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.