Cara Membuat Dropdown Menu Sederhana Menggunakan CSS3

7 • menit membaca

Daftar Isi

Ada diantara anda yang sedang bingung memilih bentuk Menu Navigasi baru seperti apa yang tepat untuk blog anda? Klo ada, tutorial yang akan saya berikan kali ini, mungkin bisa sedikit membantu anda untuk menentukan pilihan :) Karena kali ini. saya mau ngajak anda untuk membuat Dropdown Menu Sederhana dengan memanfaatkan CSS3 :)

Dan Nggak seperti Menu Navigasi yang sudah pernah saya berikan sebelum-sebelumnya, kali ini saya membuatnya agak berbeda, dengan membuat Dropdown Menu kali ini, hanya bisa tampil ketika anda mengklik Menu Utamanya, nggak seperti Menu Navigasi yang pernah saya berikan sebelum-sebelumnya yang tanpa perlu anda klik pun sudah dapat memunculkan sub menu didalam menu utama tersebut.

Untuk lebih jelasnya, bisa anda lihat pada link demo dibawah ini, atau silahkan perhatikan gambar paling atas untuk mengetahui, seperti apa bentuk dari Dropdown Menu yang akan kita buat kali ini

DEMO

Nah, jika berminat anda bisa mengikuti panduan yang akan saya berikan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html *khusus untuk pengguna Dashboard lama
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

.wrapper {
width: 600px;
position: absolute; }
.wrapper ul {
list-style: none; }
.wrapper ul li {
background-color: #F8F8F8;
border: 1px solid #a9a9a9;
display: block;
float: left;
font: bold 12px arial;
height: 30px;
line-height: 30px;
overflow: hidden;
padding-left: 15px;
position: absolute;
width: 135px;
z-index: 10000;
-webkit-box-shadow:0px 3px 5px #cacaca;
-moz-box-shadow:0px 3px 5px #cacaca;
box-shadow:0px 3px 5px #cacaca;
background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);}
.wrapper ul li:hover {
background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}
.wrapper ul li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.wrapper ul li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.wrapper ul li#b {
margin-left: 151px; }
.wrapper ul li#c {
margin-left: 302px; }
.wrapper ul li#d {
margin-left: 453px; }
.wrapper ul li a {
display: block;
text-decoration: none;
color: #303030; }
.wrapper ul li div {
text-align: left;
font: normal 11px arial;
line-height: 19px;
margin: 10px 0; }
.wrapper ul li div a {
display: inline; }
.wrapper ul li div a:hover {
text-decoration: underline; }
.wrapper ul li div hr {
border: none;
border-top: 1px dotted #a0a0a0;
margin: 5px 0;
width: 95%; }
.wrapper ul li:hover:target {
display: inherit;
padding: 0px;
padding-left:15px;
opacity: .97;
-moz-opacity: .97;
-webkit-transition: height 0.4s ease-in; }
.wrapper ul li#a:hover:target {
height: 130px;
width: 350px;
background: #f0f9ff; }
.wrapper ul li#b:hover:target {
height: 105px;
background: #ffffd6; }
.wrapper ul li#c:hover:target {
height: 145px;
width: 200px;
background: #f8ffe8; }
.wrapper ul li#d:hover:target {
height: 140px;
width: 165px;
position: relative;
float: right;
margin-right: -5px;
z-index: 0;
text-align: center;
background: #f9f286; }

Udah? Klo udah silahkan cari HTML Menu Navigasi lama anda dan gantikan dengan kode HTML baru dibawah ini (biasanya terletak dibawah kode <body>) :

<div class='wrapper'>
<ul>
<li id='a'><a href='#a'>Free E-Book</a>
<div>
<hr/><b>Negri 5 Menara:</b> <a href='http://private-ebook.blogspot.com/2011/06/e-book-lengkap-negeri-5-menara-by-fuadi.html'>Sinopsis</a> | <a href='http://private-ebook.blogspot.com/2011/06/e-book-lengkap-negeri-5-menara-by-fuadi.html'>Download</a>
<hr/><b>Tuhan, Alam, Manusia:</b> <a href='http://private-ebook.blogspot.com/2012/02/e-book-tuhan-alam-manusia-perspektif.html'>Sinopsis</a> | <a href='http://private-ebook.blogspot.com/2012/02/e-book-tuhan-alam-manusia-perspektif.html'>Download</a>
<hr/><b>Pengakuan Bandit Ekonomi:</b> <a href='http://private-ebook.blogspot.com/2012/01/e-book-pengakuan-bandit-ekonomi-by-john.html'>Sinopsis</a> | <a href='http://private-ebook.blogspot.com/2012/01/e-book-pengakuan-bandit-ekonomi-by-john.html'>Download</a>
</div>
</li>
<li id='b'><a href='#b'>Tutorials</a>
<div>
<hr/><b><a href='http://dj-note.blogspot.com/search/label/HTML%205'>HTML5</a></b>
<hr/><b><a href='http://dj-note.blogspot.com/search/label/CSS3'>CSS3</a></b>
</div>
</li>
<li id='c'><a href='#c'>Animation & Graphics</a>
<div>
<hr/><b>2D Animation:</b><br/> <a href='#'>Analog animation</a> | <a href='#'>Flash animation</a>
<hr/><b>3D Animation:</b><br/> <a href='#'>Motion capture</a> | <a href='#'>Photo realistic</a>
</div>
</li>
<li id='d'><a href='#d'>Credit</a>
<div>
<hr/><b><a href='http://dj-note.blogspot.com/'>DJ Note</a></b>

</div>
</li>
</ul>
</div>

Jika sudah, silahkan Save template anda, dan lihat hasilnya :)

Keterangan: Silahkan ganti kata-kata maupun simbol yang saya beri warna merah dengan url atau tulisan yang ingin anda tampilkan

Selamat Mencoba... :)