Membuat Menu Dropdown Dengan CSS dan HTML

Berikut membuat menu dropdown menggunakan CSS dan HTML dengan mudah dan simpel. Kita tidak perlu membuat kode program yang panjang atau menggunakan jquery untuk membuat menu dropdown seperti dibawah ini.

Untuk membuat tampilan menu dropdown seperti diatas, kita hanya memerlukan sedikit kode HTML dan CSS.

Berikut kode HTML yang digunakan:

<div id="nav"> <ul> <li class="first"><a href="#">Beranda</a></li> <li><a href="#">Profile</a></li> <li><a href='#'>Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">J-QUERY</a></li> </ul> </li> <li><a href="#">KONTAK</a></li> </ul> </div>

Dan kode CSS yang dibutuhkan adalah seperti berikut :

Pada baris kode CSS dibawah ini kita perlu mendefenisikan selector-selector yang digunakan dan memberikan nilai untuk tiap-tiap properti yang dimiliki oleh selector tersebut seperti selector #nav, #nav ul dan seterusnya.

Tiap-tiap selector yang kita buat, kita perlu mengatur nilai dari propertinya seperti font, position, width, height, font size dan seterusnya.

*{ margin:0px; padding: 0px; }

#nav {

     font-family: arial, sans-serif;

     position: relative;

     width: 390px;

     height:56px;

     font-size:14px;

     color:#999;

     margin: 0px auto;

}

#nav ul {

     list-style-type: none;

}

#nav ul li {

     float: left;

     position: relative;

}

#nav ul li a {

     text-align: center;

     border-right:1px solid #e9e9e9;

     padding:20px;

     display:block;

     text-decoration:none;

     color:#999;

}

#nav ul li ul {

     display: none

}

#nav ul li:hover ul {

     display: block;

     position: absolute;

}

#nav ul li:hover ul li a {

     display:block;

     background:#12aeef;

     color:#ffffff;

     width: 110px;

     text-align: center;

     border-bottom: 1px solid #f2f2f2;

     border-right: none;

}

#nav ul li:hover ul li a:hover {

     background:#6dc7ec;

     color:#fff;

}

Berikut kode lengkapnya dalam dokumen HTML

<html>
<head>
<title>.:.:.: Menu Drop Down :.:.:.</title>
<style type="text/css">
*{ margin:0px; padding: 0px; }
 
#nav {
     font-family: arial, sans-serif;
     position: relative;
     width: 390px;
     height:56px;
     font-size:14px;
     color:#999;
     margin: 0px auto;
}
 
#nav ul {
     list-style-type: none;
}
 
#nav ul li {
     float: left;
     position: relative;
}
 
#nav ul li a {
     text-align: center;
     border-right:1px solid #e9e9e9;
     padding:20px;
     display:block;
     text-decoration:none;
     color:#999;
}
 
#nav ul li ul {
     display: none
}
 
#nav ul li:hover ul {
     display: block;
     position: absolute;
}
 
#nav ul li:hover ul li a {
     display:block;
     background:#12aeef;
     color:#ffffff;
     width: 110px;
     text-align: center;
     border-bottom: 1px solid #f2f2f2;
     border-right: none;
}
 
#nav ul li:hover ul li a:hover {
     background:#6dc7ec;
     color:#fff;
}
</style>
</head>

<body>
<div id="nav">
    <ul>
        <li class="first"><a href="#">Beranda</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href='#'>Design</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">J-QUERY</a></li>
        </ul>
        </li>
        <li><a href="#">KONTAK</a></li>
    </ul>
</div>
</body>
</html>

Untuk menjalankannya, anda tinggal copy kode tersebut ke notepad ataupun editor lainnya. Dan simpan dalam format .html kemudian buka file tersebut menggunakan browser seperti Chrome ataupun Mozilla Firefox. Semoga bermanfaat, Terimakasih.

Tamtam Wijaya on Design On 11/12/2013 08:54:00 PM with 1 comment

1 komentar: