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
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> </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> </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:
Posting Komentar