Cara membuat menu vertical dengan CSS

Rangga

21 Mar, 2016

Setelah sekian lama tidak posting sebuah artikel, kali ini saya akan mencoba membuat tutorial cara membuat menu vertical dengan CSS, karena di comment artikel cara membuat menu dropdown dengan css ada yang minta dibuatkan tutorial dengan menu vertical.

Pertama, buatlah struktur HTML menu yang ingin dibuat :

<nav>
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Tutorial</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Profile</a></li>
   </ul>
</nav>

Setelah itu kita coba tambahkan submenu pada menu primary diatas, contohnya:

<nav>
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Tutorial</a>
   <ul>
   <li><a href="#">WordPress</a></li>
   <li><a href="#">Photoshop</a></li>
   <li><a href="#">Web Design</a>
       <ul>
       <li><a href="#">HTML</a></li>
       <li><a href="#">CSS</a></li>
       </ul>
   </li>
   </ul>
   </li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Profile</a></li>
   </ul>
</nav>

Tampilan sebelum diberi code CSS

Memang terlihat sangat tidak menarik karena memang kita belum menambahkan code CSS untuk mempercantik tampilan menu tersebut. Langsung saja kita coba tambahkan beberapa code css, silahkan anda tambahkan code berikut ini ke file css anda :

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
position:relative;
width:150px;
}
nav ul li:hover {
background: #1b9bff;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 12px 25px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top:0;
left:100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 12px 25px;
color: #fff;
}
nav ul ul li a:hover {
background: #1b9bff;
}

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

Berikut penjelasan dari code CSS yang membuat vertical menu ini berjalan dengan baik:

nav ul li {
position:relative;
width:150px;
}

Pada kali ini si sub-menu li pertama (Home, Tutorial, Contact, Profil) di berikan position:relative, agar menu ini bisa kita atur posisinya sedemikian rupa sesuai kebutuhan dan juga menjadikan sub-menu pertama ini sebagai elemen induk.

nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top:0;
left:100%;
}

Disini sub-menu dari menu (Wordpress, Photoshop, Web, Design) diberikan position:absolute; sehingga kita bisa mengatur posisinya sedemikian rupa untuk mengikuti elemen induk yang diberikan pada sub-menu pertama tadi silahkan anda coba atur-atur value dari property left dan top nya.

Jika anda sudah mencobanya maka tampilan akhirnya akan menjadi seperti ini:

Tampilan akhir Menu vertical dengan CSS

Sekian tutorial CSS tentang cara membuat menu vertical dengan CSS, jika ada kesalahan atau yang ingin ditanyakan silahkan di comment, Terima kasih

Cara membuat menu Dropdown dengan CSS

Cara menambah code css di Blogger

Cara mengetahui font yang digunakan website

Tutorial membuat template website

Cara Membuat Search Form Responsive