Cara Menciptakan Hidangan Vertical Dengan Css

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

Pertama, buatlah struktur HTML sajian 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 sajian 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 ialah memang kita belum menambahkan code CSS untuk mempercantik tampilan sajian 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 sajian 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 sajian ini dapat kita atur posisinya sedemikian rupa sesuai kebutuhan dan juga menyebabkan 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 sajian (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 kesudahannya akan menjadi ibarat ini:

Tampilan tamat Menu vertical dengan CSS

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

Share this post