Membuat Menu Navbar Horizontal Dengn Animasi (UvumiTools)

Menyambung posting sebelumnya 'Membuat Menu Navbar Horizontal' disini ku akan menambahkan sedikit animasi. Sebenernya sama saja, bedanya hanya saat cursor di sorotkan pada menu makan sub menu akan muncul dengan santai tidak langsung ada. Penasaran? makanya coba!

Cara membuatnya cukup mudah, tinggal ikutin aja langkah berikut ini:

1. Login dulu ke blogspot.
2. Lalu ke TATA LETAK --> EDIT HTML.
3. Kemudian masukkan kode di bawah ini di atas kode ]]></b:skin>:

/* Navbar
----------------------------------------------- */
#bg_nav {
border-bottom: 3px Double $bordercolor;
border-top: 3px Double $bordercolor;
width: 960px;
height: 30px;
font-size: 10px;
font-family: Arial, Tahoma, Verdana;
color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
}

#bg_nav a, #bg_nav a:visited {
font-size: 11px;
color : #000000;
text-decoration: none;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #ffffff;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 700px;
float: left;
padding-left: 15px;
}

#navright {
width: 200px;
height : 30px;
float: right;
padding-top: 3px;
padding-right: 15px;
}


#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
color: #ffffff;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 0px solid #ffffff;
}

#nav a:hover {
color: #ff0000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #000000;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom : 3px double &bordercolor;
}

#nav li li a:hover, #nav li li a:active {
background: #ffffff;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

4. Letakkan kode berikut di atas Kode </head>:

<script src='

http://uvumitools.googlecode.com/files/mootools-for-dropdown.js

' type='text/javascript'/>
<script src='

http://uvumitools.googlecode.com/files/UvumiDropdown-compressed.js

' type='text/javascript'/>
<script type='text/javascript'>
var myMenu = new UvumiDropdown(&quot;dropdown-menu&quot;);

</script>

5. Letakan kode di bawah ini di atas kode <div id='content-wrapper'>:

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'><div id='dropdown-menu'>

<ul>
<li><a href='Link Menu 1'>Menu 1</a></li>

<li><a href='#'>Menu 2</a><ul>
<li><a href='Link Sub Menu 2.1'>Sub Menu 2.1</a></li>
<li><a href='Link Sub Menu 2.2'>Sub Menu 2.2</a></li>

<li><a href='Link Sub Menu 2.3'>Sub Menu 2.3</a><ul>
<li><a href='Link Sub Sub Menu 2.3.1'>Sub Sub Menu 2.3.1</a></li>
<li><a href='Link Sub Sub Menu 2.3.2'>Sub Sub Menu 2.3.2</a></li></ul></li>
</ul></li>

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

Tinggal atur saja sesuai kebutuhan

6. Klik tombol simpan template.
7. Selesai deh!

Jika anda tertarik dengan animasi ini, mungkin anda bisa pelajari animasi lainnya di http://uvumitools.com/