Drop Down Menu Dengan CSS
Kali ini gw mau menjelaskan cara bikin Drop Down Menu pada web dengan menggunakan Pure CSS murni…
Ok Langsung aja ya…
Langkah Pertama
@charset "UTF-8";
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown li.rtl ul {
top: 100%;
right: 0;
left: auto;
}
ul.dropdown li.rtl ul ul {
top: 1px;
right: 99%;
left: auto;
}
Langkah Kedua
1. Buka NotePad lagi, Kemudian copy paste kode script di bawah ini. Lalu Simpan dengan nama "default1.css".
@import "default.css";
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 5px 30px;
}
ul.dropdown li {
padding: 0;
}
ul.dropdown ul a,
ul.dropdown ul span {
padding: 8px;
}
ul.dropdown *.dir {
padding: 5px 30px;
}
ul.dropdown ul *.dir {
padding: 8px 30px 8px 8px;
}
ul.dropdown ul a {
width: 133px;
}
ul.dropdown ul a.dir {
width: 111px;
}
ul.dropdown *.open {
background-color: #3d3d3d;
}
ul.dropdown ul *.open {
background-color: #4c4c4c;
color: #fff;
}
ul.dropdown ul ul *.open {
background-color: #595959;
color: #fff;
}
ul.dropdown a.open:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul a.open:hover {
color: #fff;
}
ul.dropdown li:hover > *.dir {
background-color: #3d3d3d;
}
ul.dropdown ul li:hover > *.dir {
background-color: #4c4c4c;
}
ul.dropdown ul ul li:hover > *.dir {
background-color: #595959;
color: #fff;
}
ul.dropdown li:hover > a.dir:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul li:hover > a.dir:hover {
color: #fff;
}
Kemudian buat lagi file CSS dengan script seperti dibawah ini. Simpan dengan nama file Default.css
@charset "UTF-8";
@import "helper.css";
ul.dropdown li {
padding: 5px;
}
ul.dropdown *.dir {
padding-right: 30px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul *.dir {
padding-right: 15px;
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown ul ul *.dir {
}
ul.dropdown-vertical *.dir {
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 15px;
background-position: 0 50%;
}
ul.dropdown {
font: bold 17px/normal Arial, Helvetica, sans-serif;
}
ul.dropdown li {
background-color: #333;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
background-color: #4498c7;
color: #fff;
}
ul.dropdown ul a.dir:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown a:active {
color: #fff;
}
ul.dropdown ul {
left: auto;
right: 0;
width: 150px;
margin-top: -1px;
border-top: 1px solid #1a1a1a;
border-left: solid 1px #4c4c4c;
font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;
}
ul.dropdown ul li {
background-color: #3a3a3a;
}
ul.dropdown ul ul {
top: 0;
right: auto;
left: 100%;
margin-top: 0;
border-top: none;
border-left: none;
font-weight: normal;
}
ul.dropdown ul ul li {
background-color: #4c4c4c;
}
ul.dropdown ul ul ul li {
background-color: #595959;
}
ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }
ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }
ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
#n-movies { width: 250px; text-align: center; }
#n-movies ul { right: auto; left: 0; width: 249px; text-align: left; }
#n-movies ul ul { left: 249px; width: 150px; }
#n-movies ul a { width: 232px; }
#n-movies ul a.dir { width: 210px; }
#n-movies ul ul a { width: 133px; }
#n-movies ul ul a.dir { width: 111px; }
#n-movies ul ul ul { left: 100%; }
Buat file Css lagi dengan nama helper.css, dengan script seperti dibawah ini.
* { margin: 0; padding: 0; }
body { padding: 50px; background: #4c4c4c url(images/grad1.png) 0 0 repeat-x; color: #d9d9d9; font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; }
h1 { margin-bottom: .5em; border-bottom: solid 1px #d9d9d9; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 180%; text-indent: 5px; letter-spacing: -1px; }
cite { float: right; }
ul.classic { list-style: disc; margin-bottom: 1em; padding-left: 2em; }
div.section { clear: both; padding-top: 50px; }
.table1 { float: right; margin-bottom: 2em; border: solid 1px #eee; }
.table1 caption { color: #fff; text-align: center; padding-bottom: 5px; }
.table1 th, .table1 td { padding: 7px; }
.table1 th, .table1 thead td { background-color: lightyellow; color: #000; }
.table1 tbody td { background-color: #fff; color: #000; }
.table1 tbody th { text-align: right; }
Langkah Ketiga
Masukan script ini diatas </head> :
<link href="test_drop/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="test_drop/default1.css" media="all" rel="stylesheet" type="text/css" />
Pada Script href="test_drop/dropdown.css", Silakan sesuaikan dengan tempat dimana temen2 menyimpan file dropdown.CSS dan default1.CSS.
Bila sudah, kita lanjut lagi... Masukan script dibawah ini pada file HTML temen2, dan sesuaikan sendiri untuk tata letak dan nama dari menu tersebut.
<ul id="nav" class="dropdown dropdown-horizontal">
<li id="n-home"><a href="./">Home</a></li>
<li id="n-music"><a href="./" class="dir">Musik Klip</a>
<ul>
<li class="first"><a href="./" class="dir">Artis</a>
<ul>
<li class="first"><a href="./">semua Artis</a></li>
<li><a href="./">paporit</a></li>
<li><a href="./">Populer</a></li>
<li><a href="./">Baru</a></li>
</ul>
</li>
<li><span class="dir">Music Videos</span>
<ul>
<li class="first"><a href="./">MTV.com Video Picks</a></li>
<li><a href="./">Video Premieres</a></li>
<li><a href="./">Most Popular Videos</a></li>
<li><a href="./">Playlists</a></li>
<li><a href="./">Top Videos by Year</a></li>
<li><a href="./">Live Performances</a></li>
<li><a href="./">The Big Ten</a></li>
<li><a href="./">Headbangers Ball</a></li>
<li><a href="./">Playlibs</a></li>
<li><a href="./">Subterranean</a></li>
<li><a href="./">Sucker Free</a></li>
<li><a href="./">Video Remixer</a></li>
</ul>
</li>
<li><a href="./">Your Music on MTV?</a></li>
<li><a href="./" class="dir">Lyrics</a>
<ul>
<li class="first"><a href="./">Search for Lyrics</a></li>
<li><a href="./">Play Lyrics Game</a></li>
</ul>
</li>
<li><span class="dir">Music Blogs</span>
<ul>
<li class="first"><a href="./">Buzzworthy Blog</a></li>
<li><a href="./">Headbangers Blog</a></li>
<li><a href="./">Play | Rhapsody Blog</a></li>
<li><a href="./">Subterranean Blog</a></li>
<li><a href="./">Sucker Free Blog</a></li>
<li><a href="./">You R Here Blog</a></li>
</ul>
</li>
<li><span class="dir">Music Shows</span>
<ul>
<li class="first"><a href="./">Dew Circuit Breakout</a></li>
<li><a href="./">Discover & Download</a></li>
<li><a href="./">MTV Live</a></li>
<li><a href="./">Spankin' New Music Week</a></li>
<li><a href="./">TRL</a></li>
<li><a href="./">Unplugged</a></li>
<li><a href="./">Yo! MTV Raps</a></li>
</ul>
</li>
<li><span class="dir">Songs</span>
<ul>
<li class="first"><a href="./">The Leak |<br/>Album Previews</a></li>
<li><a href="./">Free Downloads</a></li>
<li><a href="./">MTV Radio</a></li>
<li><a href="./">Listen on Rhapsody</a></li>
</ul>
</li>
<li><span class="dir">Genres</span>
<ul>
<li class="first"><a href="./">Rock</a></li>
<li><a href="./">Pop</a></li>
<li><a href="./">Hip-Hop</a></li>
<li><a href="./">Soul/R&B</a></li>
<li><a href="./">Indie</a></li>
</ul>
</li>
<li><a href="./">Billboard Charts</a></li>
</ul>
</li>
<li id="n-shows"><a href="./" class="dir">Shows</a>
<ul>
<li class="first"><a href="./"><strong>TV Schedule</strong></a></li>
<li><a href="./">MTV Shows Gossip</a></li>
<li><a href="./">Show Photos</a></li>
<li><a href="./">Be on MTV</a></li>
<li><a href="./"
target="_blank">Shop MTV Shows</a></li>
</ul>
</li>
<li id="n-news"><a href="./" class="dir">News</a>
<ul>
<li class="first"><a href="./">News Main</a></li>
<li><span class="dir">Headlines</span>
<ul>
<li class="first"><a href="./">Breaking News</a></li>
<li><a href="./">Music News</a></li>
<li><a href="./">Movie News</a></li>
<li><a href="./">Video Game News</a></li>
<li><a href="./">World/National News</a></li>
</ul>
</li>
<li><a href="./">Video Updates & Interviews</a></li>
<li><a href="./">Newsroom Blog</a></li>
<li><span class="dir">Live Music Coverage</span>
<ul>
<li class="first"><a href="./">Your Uploads</a></li>
<li><a href="./">You R Here Blog</a></li>
</ul>
</li>
<li><span class="dir">MTV Reporters</span>
<ul>
<li class="first"><a href="./">Liz Hernandez</a></li>
<li><a href="./">Tim Kash</a></li>
<li><a href="./">Kurt Loder</a></li>
<li><a href="./">John Norris</a></li>
<li><a href="./">SuChin Pak</a></li>
<li><a href="./">Sway</a></li>
</ul>
</li>
<li><a href="./">Video Games Blog</a></li>
<li><a href="./">Street Team '08</a></li>
<li><a href="./">Hottest MCs</a></li>
<li><a href="./">News Alerts</a></li>
</ul>
</li>
</ul>
Selesai. Silakan temen2 ubah script diatas sesuai dengan kebutuhannya. Met Mencoba…
Read More - Drop Down Menu Dengan CSS
