Cara Menciptakan Hidangan Vertical Dengan Css

Sunday, May 12, 2019

Setelah sekian usang tidak posting sebuah artikel, kali ini aku akan mencoba membuat tutorial cara menciptakan hidangan vertical dengan CSS, alasannya yaitu di comment artikel cara menciptakan hidangan dropdown dengan css ada yang minta dibuatkan tutorial dengan hidangan vertical.

Pertama, buatlah struktur HTML hidangan yang ingin dibentuk :

<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 hidangan 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 alasannya yaitu memang kita belum menambahkan code CSS untuk mempercantik tampilan hidangan 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 klarifikasi dari code CSS yang menciptakan vertical hidangan 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, biar hidangan ini dapat kita atur posisinya sedemikian rupa sesuai kebutuhan dan juga menimbulkan 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 hidangan (Wordpress, Photoshop, Web, Design) diberikan position:absolute; sehingga kita dapat 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 balasannya akan menjadi menyerupai ini:

Tampilan tamat Menu vertical dengan CSS

Sekian tutorial CSS wacana cara menciptakan hidangan vertical dengan CSS, bila ada kesalahan atau yang ingin ditanyakan silahkan di comment, Terima kasih

Tag : software