Membuat Navigasi Dropdown Sliding Web Menu tanpa Flash dengan JQuery

Membuat tampilan web menu /Navigasi yang interaktif tidak hanya dengan Flash saja, melainkan anda bisa membuat Navigasi menu dengan Script jQuery. Navigasi ini akan tampil secara dropdown saat mouse anda arahkan pada Menu tersebut.

Berikut adalah Tutorial untuk membuat Effect Interaktif Drop Down Navigasi dengan CSS dan script jQuery.


Struktur HTML

hal pertama yang perlu anda lakukan adalah meload css file yang kita buat ( jika code/file css berada di luar html ( external css) pada bagian HEAD
1 <link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8">
2 <script type="text/javascript" src="/jquery-1.3.2.js"></script>


kemudian Menambahkan / membuat kode HTML sederhana pada halaman web dan menambahkannya diantara bagian BODY atau dimana menu ini nantinya akan ditampilkan. Penggunaan css class span di dalam list element untuk tiap Navigasi/Menu item anda.
1 <ul id="navigation">
2 <li class="home"><a><span>Home</span></a></li>
3 <li class="about"><a><span>About</span></a></li>
4 <li class="search"><a><span>Search</span></a></li>
5 <li class="photos"><a><span>Photos</span></a></li>
6 <li class="rssfeed"><a><span>Rss Feed</span></a></li>
7 <li class="podcasts"><a><span>Podcasts</span></a></li>
8 <li class="contact"><a><span>Contact</span></a></li>
9 </ul>


CSS Menu Navigasi

Dibawah ini contoh penggunaan CSS untuk navigasi dari HTML diatas. Anda dapat menyesesuaikannya untuk jarak dan letak dari navigasi ini.
01 ul#navigation {
02 position: fixed;
03 margin: 0px;
04 padding: 0px;
05 top: 0px;
06 right: 10px;
07 list-style: none;
08 z-index:999999;
09 width:721px;
10 }
11 ul#navigation li {
12 width: 103px;
13 display:inline;
14 float:left;
15 }

Pada CSS diatas menggunakan z-index:999999 yang tinggi. Ini dimaksudkan agar Menu tampil secara "Floating" di atas dari semua element yang lainnya.

Untuk membuat agar menu tampil horisontal maka pada CSS kita akan mengeset element menjadi inline, seperti pada contoh css dibawah ini :
01 ul#navigation li a {
02 display: block;
03 float: left;
04 margin-top: -2px;
05 width: 100px;
06 height: 25px;
07 background-color: #E7F2F9;
08 background-repeat: no-repeat;
09 background-position: 50% 10px;
10 border: 1px solid #BDDCEF;
11 text-decoration: none;
12 text-align: center;
13 padding-top: 80px;
14 }


Selanjutnya untuk memperindah tampilan navigasi anda, kita tambahkan Rounded Border dan background dengan CSS serta membuat item terkesan transparant :
01 ul#navigation li a {
02 display: block;
03 float:left;
04 margin-top: -2px;
05 width: 100px;
06 height: 25px;
07 background-color:#E7F2F9;
08 background-repeat:no-repeat;
09 background-position:50% 10px;
10 border:1px solid #BDDCEF;
11 text-decoration:none;
12 text-align:center;
13 padding-top:80px;
14 -moz-border-radius:0px 0px 10px 10px;
15 -webkit-border-bottom-right-radius: 10px;
16 -webkit-border-bottom-left-radius: 10px;
17 -khtml-border-bottom-right-radius: 10px;
18 -khtml-border-bottom-left-radius: 10px;
19 opacity: 0.7;
20 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
21 }


Untuk memperindah tampilan effect text link Menu dari tiap tiap item element kita memperindah dengan menambahkan images background yang akan terlihat seperti Icon pada tiap link menu.
01 ul#navigation .home a{
02 background-image: url(home.png);
03 }
04 ul#navigation .about a {
05 background-image: url(id_card.png);
06 }
07 ul#navigation .search a {
08 background-image: url(search.png);
09 }
10 ul#navigation .podcasts a {
11 background-image: url(ipod.png);
12 }
13 ul#navigation .rssfeed a {
14 background-image: url(images/rss.png);
15 }
16 ul#navigation .photos a {
17 background-image: url(camera.png);
18 }
19 ul#navigation .contact a {
20 background-image: url(mail.png);
21 }


untuk effect mouse over link menu dapat di melakukan penggantian warna background yang berbeda
1 ul#navigation li a:hover{
2 background-color:#CAE3F2;
3 }


Selanjutnya kita akan melakukan span css untuk tiap item pada element menu
1 ul#navigation li a span{
2 letter-spacing:2px;
3 font-size:11px;
4 color:#60ACD8;
5 text-shadow: 0 -1px 1px #fff;
6 }


pekerjaan yang terakhir yaitu menambahkan effect sliding/ dropdown dengan menambahkan function script jQuery pada html yang kita buat.
01 <script type="text/javascript">
02 $(function() {
03 var d=300;
04 $('#navigation a').each(function(){
05 $(this).stop().animate({
06 'marginTop':'-80px'
07 },d+=150);
08 });
09
10 $('#navigation > li').hover(
11 function () {
12 $('a',$(this)).stop().animate({
13 'marginTop':'-2px'
14 },200);
15 },
16 function () {
17 $('a',$(this)).stop().animate({
18 'marginTop':'-80px'
19 },200);
20 }
21 );
22 });
23 </script>