Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Drop down menu adalah  navigasi yang banyak digunakan pada website, namun dalam pembuatannya drop down menu selain menggunakan CSS juga sering dibantu dengan Javascript. Pada tutorial ini saya akan menunjukkan pembuatan drop down menu menggunakan CSS tanpa bantuan Javascript sama sekali.

Adapun drop down menu yang akan kita buat adalah seperti pada (Gambar 1) berikut :

 

 

 Gambar 1

 

Pada drop down menu ini ada 3 level menu :

  • main menu (level 1)
  • submenu (level 2)
  • sub submenu (level 3)

 

Struktur HTML

Adapun struktur HTML drop down menu tersebut adalah sebagai berikut :

<!doctype html>
<html>
<head>
</head>
<body>
 <nav>   
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Services &#9662;</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Graphic Design</a>
                    <ul>
                        <li><a href="#">Print Media</a></li>
                        <li><a href="#">Illustration</a></li>
                    </ul>    
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
 </nav>   
</body>
</html>     

 

CSS Style

Pada bagian ini kita akan membahas CSS style dari drop down menu untuk point pentingnya

    nav {
        margin-top: 100px;
        text-align: center;
    }

    nav ul{
        font-family: Open Sans;
        font-size: 16px;
        padding: 0;
        list-style: none;
        text-align: center;
        display: inline-table;

    }

    nav ul li{
        float: left;
        width: 200px;
        text-align: center;
        line-height: 21px;
        background-color: #006b7a;
    }
    
    nav ul li a{
        display: block;
        padding: 5px 10px;
        color: #FFF;
        background-color: #006b7a;
        text-decoration: none;
    }

    nav ul li a:hover{
        color: #fff;
        background-color: #007e94;
    }

 

Dimulai dengan nav dan nav ul kita kita aplikasikan style pada level 1 (main menu).

  • Property text-align : center pada selector nav dan property display: inline-table pada selector nav li agar menu berada pada posisi tengah halaman
  • Property float: left; pada selector nav ul li untuk mengatur item list (li) dari menu item tersusun secara horizontal
  • Property display : block pada selector nav ul li a agar kotak masing-masing menu bisa memiliki width : 200px. Sehingga setiap menu bisa bersampingan satu sama lain dengan rapat tanpa celah
  • Property nav ul li ul{display: none;} berfungsi untuk menyembunyikan sementara drop down menu.Tanpa property {display: none;} ini maka semua menu baik itu level 1, level 2 dan level 3 akan terlihat secara bersamaan

 

Gambar 2

 

   nav ul li ul{
        display: none;
    }

   nav ul li:hover ul{
        display: block;  /*display the dropdown */
    }
 

 

Selanjutnya kita akan masuk ke level 2 (sub menu). Level 2 (sub submenu) yakni berupa drop down menu hanya akan tampil/terlihat bila mouse cursor pengguna masuk ke daerah menu yang dimaksud (hover). Pada saat tidak ada cursor yang memasuki daerah menu tersebut maka submenu/drop down menu tersebut tidah tampak/terlihat

  • nav ul li ul{display: none;} berfungsi menyembunyikan submenu/drop down menu pada saat cursor tidak memasuki daerah menu
  • nav ul li:hover ul{display: block;} untuk menampilkan submenu/drop down menu saat cursor memasuki daerah menu

 

 

Gambar 3

 

   nav ul ul ul li {
         display: none;
    }

    nav ul li ul li:hover ul li{
         display: block;
         float: none;
    }

 

Selanjutnya kita akan masuk ke level 3 (sub submenu). Pada level 3 ini pada prinsipnya sama dengan level 2 dimana sub submenu ini tidak akan tampil bila mouse cursor tidak memasuki daerah menu

  • Property nav ul ul ul li {display: none;} untuk menyembunyikan level 3 (sub submenu) pada saat cursor tidak memasuki daerah menu
  • Property nav ul li ul li:hover ul li {display: block; float: none;} untuk menampilkan level 3 (sub submenu) saat cursor memasuki daerah menu

Dengan semua CSS style yang telah kita terapkan pada HTML di atas namun tampilan menu masih seperti gambar di bawah ini (Gambar 4). Pada (Gambar 4) level 3 (sub submenu) berada pada posisi di bawah submenu Graphic Design (ditandai oleh garis merah putus-putus). Sedangkan posisi level 3 (sub submenu) yang kita inginkan ini pada daerah (2) yang ditandai garis hijau putus-putus.

 

Gambar 4

 

Untuk memindahkan level 3 (sub submenu) dari posisi (1) ke posisi (2) pada Gambar (4) di atas kita butuh CSS selector berikut ini :

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

 

  • Property nav ul ul ul{ position: absolute; top:0; left:100%;} untuk memindahkan menu level 3 (sub submenu) ke daerah (2).Property position : absolute menjadikannya lebih fleksibel
  • Untuk bisa menggunakan position : absolute pada menu level 3 maka ancestor dari menu level 3 tersebut dikenakan position : relative , adapun ancestornya ada pada nav ul ul li{position: relative;}

 

Dari keseluruhan CSS style yang kita buat maka hasil dari drop down menunya adalah seperti pada (Gambar 5) di bawah ini :

 

 

Gambar 5