Membuat Navigasi Dropdown Menu CSS dengan JQuery

Posted on Updated on


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

<link rel=”stylesheet” href=”/style.css” type=”text/css” charset=”utf-8″>

/jquery-1.3.2.js

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

<ul id="navigation"> 
<li><a><span>Home</span></a> </li>
 <li><a><span>About</span></a></li> 
<li><a><span>Search</span></a></li>
 <li><a><span>Photos</span></a></li> 
 <li><a><span>Rss Feed</span></a></li> 
<li><a><span>Podcasts</span></a></li> 
<li><a><span>Contact</span></a></li>
 </ul> 

CSS Menu Navigasi

Dibawah ini contoh penggunaan CSS untuk navigasi dari HTML diatas. Anda dapat menyesesuaikannya untuk jarak dan letak dari navigasi ini.

ul#navigation 
{ position: fixed;
 margin: 0px; 
padding: 0px; 
top: 0px; 
right: 10px;
 list-style: none; 
 z-index:999999;
 width:721px;
 } 
ul#navigation li 
{ width: 103px; 
display:inline; 
float:left; }

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 :

ul#navigation li a { display: block; float: left; margin-top: -2px; width: 100px; height: 25px; background-color: #E7F2F9; background-repeat: no-repeat; background-position: 50% 10px; border: 1px solid #BDDCEF; text-decoration: none; text-align: center; padding-top: 80px; }

Selanjutnya untuk memperindah tampilan navigasi anda, kita tambahkan Rounded Border dan background dengan CSS serta membuat item terkesan transparant :

ul#navigation li a 
{ display: block; 
float:left; 
margin-top: -2px; 
width: 100px; 
height: 25px; 
background-color:#E7F2F9; 
background-repeat:no-repeat; 
background-position:50% 10px; 
border:1px solid #BDDCEF; 
text-decoration:none; 
text-align:center; 
padding-top:80px; 
-moz-border-radius:0px 0px 10px 10px; 
-webkit-border-bottom-right-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -khtml-border-bottom-right-radius: 10px;
 -khtml-border-bottom-left-radius: 10px;
 opacity: 0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

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.

ul#navigation .home 
a{ background-image: url(home.png);
 } ul#navigation .about a { background-image: url(id_card.png);
 } ul#navigation .search a { background-image: url(search.png); 
} ul#navigation .podcasts a { background-image: url(ipod.png);
 } ul#navigation .rssfeed a { background-image: url(images/rss.png); 
} ul#navigation .photos a { background-image: url(camera.png); }
 ul#navigation .contact a { background-image: url(mail.png); }

untuk effect mouse over link menu dapat di melakukan penggantian warna background yang berbeda

ul#navigation li a:hover{ background-color:#CAE3F2; }

Selanjutnya kita akan melakukan span css untuk tiap item pada element menu

ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; }

pekerjaan yang terakhir yaitu menambahkan effect sliding/ dropdown dengan menambahkan function script jQuery pada html yang kita buat.

 
$(function() 
{ var d=300; 
$('#navigation a').each(function()
{ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); });
 $('#navigation > li').hover( function () 
{ $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); },
 function () { $('a',$(this)).stop().
animate({ 'marginTop':'-80px' },200); } ); });  

Preview menu disini

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s