Selasa, 20 September 2011

Dropdown menu sederhana menggunakan Jquery



Dropdown menu sederhana menggunakan Jquery
Untuk membuat sebuah dropdown sederhana kita tidak membutuhkan sebuah pluggin jquery yang begitu kompleks untuk membuatnya.. cukup dengan mengunakan beberapa baris script sederhana menggunakan jquery. adapun langkah yang harus di lakukan adalah

Download Demo

1. Persiapkan struktur dan style menu dropdown

Untuk dropdown sederhana kita hanya akan menggunakan 1 level dropdown. adapun struktur html yang akan di bentuk adalah seperti berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<ul id="pgmenu">
 <li>
  <a href="#" class="sub">Main menu<span>&nbsp;</span></a>
  <ul>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
   <li><a href="#">Drop Down Menu</a></li>
  </ul>
 </li>
 <li>
  <a href="#" class="sub">Import<span>&nbsp;</span></a>
  <ul>
   <li><a href="#">Slide Effect</a></li>
   <li><a href="#">Slide Effect</a></li>
   <li><a href="#">Slide Effect</a></li>
   <li><a href="#">Slide Effect</a></li>
   <li><a href="#">Slide Effect</a></li>
   <li><a href="#">Slide Effect</a></li>
  </ul>
 </li>
 <li><a href="#">Export</a></li>
 <li><a href="#">Help</a></li>
</ul>
Struktur Css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
pgmenu
 { margin: 0;
  padding: 0
  }
 
 #pgmenu li
 { float: left;
  list-style: none;
  font-size: 12px;
  }
 
 #pgmenu li a span{
  background:red;
  padding:2px 0 2px 6px;
  background:url("img/desc.gif") no-repeat center right;
 }
 
 #pgmenu li a
 { display: block;
  background: #777;
  padding: 4px 12px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  }
 
 #pgmenu li.pgmv a{
  background:  #2f6795;
  color:#d5e1ea; 
 }
 
 #pgmenu li a:hover{ 
  background: #2f6795;
  color:#d5e1ea; 
  }
 
 #pgmenu li ul
 { margin: 0;
  position: absolute;
  visibility: hidden;
  width:150px;
  padding:2px;
  background: #2f6795;
 }
 
 #pgmenu li ul li
 { float: none;
  display: inline}
 
 #pgmenu li ul li a
 { width: auto;
  color:#d5e1ea;
  border:none;
  background: #2f6795;}
 
 #pgmenu li ul li a:hover
 {
  background:black;
  color:#ffffff;
 }

2. Beri event pada menu tersebut

Setelah strukturnya terbentuk, baru di beri event pada menu tersebut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//-- Menu variables -------------
 var timeout    = 0;
 var closetimer = 0;
 var menuItem = 0;
 
 $(document).ready(function(){
 
  //-- Page dropdown menu
  document.onclick = dropMenu_close;
 
  $('#pgmenu > li').bind('mouseover', dropMenu_open);
  $('#pgmenu > li').bind('mouseout',  dropMenu_timer);  
 
  $('#pgmenu>li>ul,#pgmenu>li>ul>li').mouseover(function(){
   var parent = $(this).parents('li');
   $(parent).addClass('pgmv');
  });
 
  $('#pgmenu>li>ul, #pgmenu>li>ul>li').mouseout(function(){
   var parent = $(this).parents('li');
   $(parent).removeClass('pgmv');
  });
 
 });
 
 function dropMenu_open()
 {  
  dropMenu_canceltimer();
  dropMenu_close();
  menuItem = $(this).find('ul').css('visibility', 'visible');
  }
 
 function dropMenu_close()
 {  
  if(menuItem) menuItem.css('visibility', 'hidden');
 }
 
 function dropMenu_timer()
 {  
  closetimer = window.setTimeout(dropMenu_close, timeout);
 }
 
 function dropMenu_canceltimer()
 {  
  if(closetimer){
   window.clearTimeout(closetimer);
   closetimer = null;
  }
 }

0 comments:

Poskan Komentar