Membuat Dropdown Menu Dengan CSS

Posted by Unknown on Friday, November 23, 2012

Pada artikel kali ini saya ingin mencontohkan membuat dropdown menu dengan css.
Fungsi dari dropdown menu sendiri adalah untuk menghemat ruang pada web kita karena terlalu banyaknya link atau teks yang ditampilkan di halaman web.
Langsung saja saya suka memberi contoh daripada bertele-tele dengan tulisan.
Lihat contoh dibawah ini kalau perlu praktekkan sendiri :

Persiapan, saya akan membuat 2 file yaitu terdiri dari file index.html. Untuk file css nya akan terpisah dengan nama file style.css.

Untuk file index.html berikut scriptnya :

Untuk file style.css berikut scriptnya :

body {
 background:black;}
 
#navMenu{
 margin:0;
 padding:0;
 width:180px;
 height:30px;
 cursor:pointer;
 background-color:red;
 color:#ffffff;
 font:normal 20px/100% Georgia,Serif;
 text-decoration:none;
 outline:none;
 vertical-align:middle;
 float:left;
 text-align: center;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 vertical-align: baseline;
 border-radius:10px;
}

#navMenu:hover{
 background: #d57ea5;
 background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
 background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
 border-radius:10px;
}

#navMenu ul{
 margin:0;
 padding:0;
 line-height:30px;
}

#navMenu li{
 margin:0;
 padding:0;
 list-style:none;
 float:left;
 position:relative;
}

#navMenu ul li a {
 text-align:center;
 font-family:"Comic Sans";
 text-decoration:none;
 height:30px;
 width:180px;
 display:block;
 color:#404040;
}

#navMenu ul li a:hover {
 background: #d57ea5;
 background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
 background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
 border-radius:10px;
}

#navMenu ul li  ul{
    width:180px;
 height:auto;
    background:pink;
    box-shadow:0 1px 4px #e0e0e0;
    -webkit-box-shadow:0 1px 4px #e0e0e0;
    -moz-box-shadow:0 1px 4px #e0e0e0;
    border:1px solid #e0e0e0;
}

#navMenu ul ul{
 position:absolute;
 visibility:hidden;
}

#navMenu ul li:hover ul{
 visibility:visible;
}

Untuk hasil, simpan kedua file tersebut kedalam satu folder. Jalankan index.html pada browser kesayangan anda. Tampilannya seperti berikut ini :

File style.css hanya memberikan efek warna supaya tampilan dari dropdown menu agar lebih menarik.
Jika anda mungkin malas mencoba file diatas berikut saya akan berikan file index.html dan style.css secara gratis.

DOWNLOAD FILE DROPDOWN MENU CSS

Membuat Dropdown Menu Dengan CSS

1 comment:

Followers

Categories

Posts

Popular Posts

About Me

Membuat Dropdown Menu Dengan CSS

Related Post on CSS

1 comment:

Followers

Categories

Posts

Popular Posts

About Me