Membuat Menu Drop Down Dengan CSS

Jul 16, 2013 by Gen Xander

Artikel sebelumnya, saya sudah membahas bagaimana Membuat menu horizontal dengan CSS yang sifatnya hanya horizontal atau mendatar. Pada artikel kali ini saya akan memberikan sedikit tutorial tentang cara Membuat menu drop down dengan CSS. Pada kesempatan kali ini, saya akan membahas penggunaan CSS dan PHP sama seperti artikel sebelumnya untuk Membuat menu drop down dengan CSS yang sifatnya Vertikal.

Preview Menu Drop Down dengan CSS

Oke langsung saja ke pokok permasalahan.

1. Membuat Halaman Menu Utama

Pertama-tama buat file baru untuk merancang halaman menu utama, silahkan anda ketik/copy perintah berikut ini kemudian simpan dengan nama menudropdown.php:

——————————————————————————————————-

<html>

<head>

<title>Menu Drop Down Dengan CSS</title>

</head>

<body>

<li>

<a href=”#”>Profile</a>

<ul>

<li><a href=”#”>Sejarah</a></li>

<li>

<a href=”#”>Prodi</a>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href=”#”>Galery</a></li>

</ul>

</div>

</body>

</html>

————————————————————————————————-

2. Membuat Script CSS

Setelah selesai membuat halaman menu utama, kbuat file untuk CSS nya. Silahkan Ketik/Copy perintah berikut ini kemudian simpan dengan nama style_menu.css :

————————————————————————————————

@charset “utf-8″;

/* CSS Document */

#DropdownMenu {

background:#00CCFF;

border-radius:0px;

width: 880px;

height: 35px;

font-size: 12px;

font-family: Arial, Tahoma, Verdana;

color:#FFFFFF;

font-weight: bold;

margin-bottom: 30px;

padding: 2px;

}

#Dropdownbox {

width: 875px;

border-radius:2px;

float: left;

margin: 0;

padding: 0;

}

#strike {

border-radius:2px;

margin: 0;

padding: 0;

}

#strike ul {

border-radius:2px;

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#strike li {

border-radius:2px;

list-style: none;

margin: 0;

padding: 0;

}

#strike li a, #strike li a:link, #strike li a:visited {

border-radius:2px;

color:#FFFFFF;

display: block;

font-size: 16px;

font-family: Georgia, Times New Roman;

font-weight: normal;

margin: 0;

padding: 9px 15px 8px;

}

#strike li a:hover, #strike li a:active {

border-radius:2px;

background:#CCCCCC;

color:#ff6803;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

#strike li li a, #strike li li a:link, #strike li li a:visited {

border-radius:2px;

background:#00CCFF;

width: 150px;

color:#FFFFFF;

font-size: 14px;

font-family: Georgia, Times New Roman;

font-weight: normal;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #FFF;

border-left: 1px solid #FFF;

border-right: 1px solid #FFF;

}

#strike li li a:hover, #strike li li a:active {

border-radius:2px;

background:#FFFF99;

color:#ff6803;

padding: 7px 10px;

}

#strike li {

border-radius:6px;

float: left;

padding: 0;

}

#strike li ul {

border-radius:6px;

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#strike li ul a {

border-radius:6px;

width: 140px;

}

#strike li ul ul {

border-radius:6px;

margin: -32px 0 0 171px;

}

#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {

border-radius:6px;

left: -999em;

}

#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {

border-radius:6px;

left: auto;

}

#strike li:hover, #strike li.sfhover {

border-radius:6px;

position: static;

}

—————————————————————————————————————-

Demikianlah artikel tentang Membuat Menu Drop Down Dengan CSS, semoga dapat membantu permasalahan yang anda hadapi.

Untuk file dan tutorial lengkapnya, silahkan anda download link di bawah ini :

Dowload Menu Drop Down Dengan CSS Lengkap dengan Tutorialnya.

ARTIKEL DISARANKAN