0 Cara Membuat Drop Down Menu CSS

Cara Membuat Drop Down Menu CSS:

Drop Down Menu dengan menggunakan CSS ini
pembuatannya amat mudah namun hasilnya tidak kalah
dengan Drop Down Menu lain yang sejenisnya.

Anda lihatlah previewnya yang seperti di atas
dan bila Anda berminat mencoba, ikutilah langkah
cara membuatnya yang seperti berikut ini :

1. Rancangan -> Tambah Gadget ->
Pilih HTML/JavaScript.

2. Masukkan ke dalam kontennya
kode berikut ini lalu simpan.

<div id="access">
<ul id="level-one">
<li><a href="URL nama blog Anda">Home</a></li>
<li>Menu Item A
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item B
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item C
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item D
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item E
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item F</li>
<li>Menu Item G</li>
</ul>

</div>

KETERANGAN :

Gantikah kata Menu Item A sampai G

dengan kata yang Anda kehendaki.

Masukkan URL link Anda yang ingin

Amda jadikan Menu-menunya.

3. Lalu masuk ke Edit HTML.

4. Cari tag </head>

5. Copy kode berikut dan letakkan
di atas atau sebelum tag </head> ini
kemudian Simpanlah template Anda.

<style type="text/css">

ul#level-one{
width:100%;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-back.png) repeat-x bottom left;/* url("http://www.entheosweb.com/tutorials/css/images/menus/grey_bkg.jpg") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFFFFF,  #f0f0f0); /* for firefox 3.6+ */
}
ul#level-one li{
width:100px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
}
ul#level-one li:hover{
background:#FFA500;
}
ul#level-two{
list-style: none;
background:#FFA500 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF4500', endColorstr='#FFA500'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:245px;
border:0px solid red;
}
ul#level-two li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #c0c0c0); /* for firefox 3.6+ */

}
ul#level-one li:hover > ul#level-two {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}

</style>

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Drop Down Menu CSS. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://kans-sas.blogspot.com/2012/01/cara-membuat-drop-down-menu-css.html" target="_blank">Cara Membuat Drop Down Menu CSS</a>

:: Get this widget ! ::

Artikel Terkait :