Teknik Menciptakan Sajian Dropdown (Css Only)

20 views

Hello, pada sesi kali ini aku akan membahas bagaimana cara menciptakan sajian dropdown hanya memakai CSS. Sebenarnya sudah ada tutorial sebelumnya yang membahas Membuat Menu Horizontal dan Vertikal dengan CSS tetapi pada tutorial kali ini aku tambahkan supaya menjadi sajian dropdown. Dengan mempelajari tutorial aku kali ini, dibutuhkan kalian sanggup mengerti teknik menciptakan sajian dropdown dan sanggup memodifikasinya supaya lebih keren lagi.

Ok eksklusif saja kita praktekkan menciptakan sajian dropdown ini

  1. Pertama-tama buat struktur HTML dasarnya dulu:
    <!DOCTYPE html><html lang=""><head><meta charset="UTF-8"><title>Belajar Membuat Menu Dropdown</title></head><body></body></html>
  2. Jika sudah, kita tambahkan list sajian <ul> dan <li> di antara tag <body> dan </body> dimana <ul> yaitu perintah HTML untuk memperlihatkan unordered list  yaitu list yang tidak ada urutan angkanya (hanya berupa symbol) dan <li> yaitu daftar listnya. Kalian boleh menambahkan daftar list sajian di dalamnya sesuka hati kalian. Pada pola kali ini aku tambahkan sajian untuk Game :
    <body><ul><li>Game</li><li>Download<ul><li>Game</li><li>Update</li></ul></li><li>Event</li></ul></body>

    Hasilnya:

  3. Kita sudah memiliki daftar list yang baik dan rapi. Untuk selanjutnya kita rubah gaya dari list standar tersebut menjadi sajian dropdown. Siapkan file css eksternalnya dan tambahkan code dengan klarifikasi berikut:
    /*mereset margin dan padding pada <ul>*/#menu{margin: 0px;padding: 0px;}/*modifikasi daftar list <li> pada <ul> dengan id menu*/#menu li{ float: left; /*membuat list horisontal*/width: 100px;padding: 5px 5px;background-color: #383838;text-align: center;color: white;position: relative;list-style: none; /*menghilangkan symbol/style list*/}/*merubah property dari <li> dikala hover(mouse berada di atas)*/#menu li:hover{background-color: rgb(196, 0, 0); /*merubah warna*/cursor: pointer; /*merubah cursor menjadi bentuk tangan*/}/*merubah property dari <ul> setelah <ul id="menu">*/#menu ul{ position: absolute;padding: 0px;top: 100%; /*agar posisi dari <ul> sempurna berada di bawah list dari <ul id="menu">*/left: 0px;display: none; /*menghilangkan <ul> dari daftar <ul> Download*/}/*yang terjadi dari <ul> dikala li di hover*/#menu li:hover ul{ display: block; /*dengan mengganti block yang sebelumnya none, maka ul akan terlihat (visible)*/}

    Jika sudah kemudian kita sisipkan eksternal style tersebut pada tag HTML nya diantara tag <head> dan </head>

    <!DOCTYPE html><html lang=""><head><meta charset="UTF-8"><title>Belajar Membuat Menu Dropdown</title><link rel="stylesheet" href="style.css"></head>
  4. Sekarang kita jalankan file HTML nya dan lihat hasilnya, list dari download akan terlihat dikala di hover:

Semoga bermanfaat

Author: 
    author
    No related post!