Dropdown menu
Ik heb nogal een lastig dropdown menu'tje te maken. Ik heb al heel wat andere scripts bekeken, maar ik vind eigenlijk niets wat echt goed werkt.
Misschien dat ooit iemand al iets gelijkaardig is tegengekomen? Graag jullie tips!
Dit is het menu:
Als je over een hoofd-item heen gaat wordt het onderlijnd en zou het submenu moeten verschijnen. (buiten bij de home-button, die blijft altijd hetzelfde) Verder moet er naast elk hoofditem een streepje. Ik hoop dat het een beetje duidelijk is.
Gewijzigd op 23/02/2011 17:26:31 door Write Down
Code (php)
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
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
$(document).ready(function(){
// Initialize for the dropdown menu
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open(){
jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}
function jsddm_close() {
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer() {
closetimer = window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer() {
if(closetimer){
window.clearTimeout(closetimer);
closetimer = null;
} }
$(document).ready(function() {
$('#menu > li').bind('mouseover', jsddm_open)
$('#menu > li').bind('mouseout', jsddm_timer)
});
document.onclick = jsddm_close;
// Initialize for the dropdown menu
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open(){
jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');
}
function jsddm_close() {
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
}
function jsddm_timer() {
closetimer = window.setTimeout(jsddm_close, timeout);
}
function jsddm_canceltimer() {
if(closetimer){
window.clearTimeout(closetimer);
closetimer = null;
} }
$(document).ready(function() {
$('#menu > li').bind('mouseover', jsddm_open)
$('#menu > li').bind('mouseout', jsddm_timer)
});
document.onclick = jsddm_close;
Let op: Het gebruikt wel jQuery, en het menu moet opgebouwd zijn uit <ul> en <li>.
De opmaak is allemaal CSS die je zelf wel op kan bouwen.
Gewijzigd op 23/02/2011 17:29:23 door - Ariën -
Waarom altijd javascript?
met javascript kan je mooiere effecten aan het verschijnen toevoegen en dat het dus niet in 1 keer in je scherm plopt
Write Down op 23/02/2011 17:51:52:
Ik verkies inderdaad ook een CSS-menu. Alleen zie ik niet in hoe ik het in dit geval allemaal netjes kan maken.
Je kan hier wat wijzer uit worden hoop ik:
HTML:
Code (php)
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
61
62
63
64
65
66
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
61
62
63
64
65
66
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welcome</title>
<link href="styles.css" rel="stylesheet" rev="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<div id="navbar">
<ul>
<li>
<a href="javascript:;"> <b>Link 1</b> </a>
<ul>
<li><a href="javascript:;">Link 1-1</a></li>
<li><a href="javascript:;">Link 1-2</a></li>
<li><a href="javascript:;">Link 1-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 2</b> </a>
<ul>
<li><a href="javascript:;">Link 2-1</a></li>
<li><a href="javascript:;">Link 2-2</a></li>
<li><a href="javascript:;">Link 2-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 3</b> </a>
<ul>
<li><a href="javascript:;">Link 3-1</a></li>
<li><a href="javascript:;">Link 3-2</a></li>
<li><a href="javascript:;">Link 3-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 4</b> </a>
<ul>
<li><a href="javascript:;">Link 4-1</a></li>
<li><a href="javascript:;">Link 4-2</a></li>
<li><a href="javascript:;">Link 4-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 5</b> </a>
<ul>
<li><a href="javascript:;">Link 5-1</a></li>
<li><a href="javascript:;">Link 5-2</a></li>
<li><a href="javascript:;">Link 5-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 6</b> </a>
<ul>
<li><a href="javascript:;">Link 6-1</a></li>
<li><a href="javascript:;">Link 6-2</a></li>
<li><a href="javascript:;">Link 6-3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
</div>
</body>
</html>
<html>
<head>
<title>Welcome</title>
<link href="styles.css" rel="stylesheet" rev="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<div id="navbar">
<ul>
<li>
<a href="javascript:;"> <b>Link 1</b> </a>
<ul>
<li><a href="javascript:;">Link 1-1</a></li>
<li><a href="javascript:;">Link 1-2</a></li>
<li><a href="javascript:;">Link 1-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 2</b> </a>
<ul>
<li><a href="javascript:;">Link 2-1</a></li>
<li><a href="javascript:;">Link 2-2</a></li>
<li><a href="javascript:;">Link 2-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 3</b> </a>
<ul>
<li><a href="javascript:;">Link 3-1</a></li>
<li><a href="javascript:;">Link 3-2</a></li>
<li><a href="javascript:;">Link 3-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 4</b> </a>
<ul>
<li><a href="javascript:;">Link 4-1</a></li>
<li><a href="javascript:;">Link 4-2</a></li>
<li><a href="javascript:;">Link 4-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 5</b> </a>
<ul>
<li><a href="javascript:;">Link 5-1</a></li>
<li><a href="javascript:;">Link 5-2</a></li>
<li><a href="javascript:;">Link 5-3</a></li>
</ul>
</li>
<li>
<a href="javascript:;"> <b>Link 6</b> </a>
<ul>
<li><a href="javascript:;">Link 6-1</a></li>
<li><a href="javascript:;">Link 6-2</a></li>
<li><a href="javascript:;">Link 6-3</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
</div>
</body>
</html>
CSS:
Code (php)
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
61
62
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
61
62
*, *:hover, *:focus, *:active, *:link, *:visited {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
}
#menu {
background-color: #606;
height: 41px;
}
#navbar {
padding-top: 5px;
margin-left: 130px;
}
#navbar ul ul {
margin-top: -1px;
visibility: hidden;
padding: 7px;
}
#navbar ul li:hover ul {
visibility: visible;
}
#navbar ul li:link ul {
visibility: visible;
}
#navbar ul li:visited ul {
visibility: visible;
}
#navbar li {
position: relative;
float: left;
width: 140px;
background-color: #606;
height: 20px;
padding: 6px;
margin-left: -20px;
}
#navbar li a {
color: #DD7A00;
font-family: Georgia;
cursor: pointer;
display: block;
text-align: center;
}
#navbar li:last-child {
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-radius-bottomright: 7px;
-webkit-border-radius-bottomleft: 7px;
-khtml-border-radius-bottomright: 7px;
-khtml-border-radius-bottomleft: 7px;
border-radius-bottomright: 7px;
border-radius-bottomleft: 7px;
padding-bottom: 10px;
}
#content {
padding: 6px;
text-align: left;
width: 98.9%;
}
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
text-decoration: none;
}
#menu {
background-color: #606;
height: 41px;
}
#navbar {
padding-top: 5px;
margin-left: 130px;
}
#navbar ul ul {
margin-top: -1px;
visibility: hidden;
padding: 7px;
}
#navbar ul li:hover ul {
visibility: visible;
}
#navbar ul li:link ul {
visibility: visible;
}
#navbar ul li:visited ul {
visibility: visible;
}
#navbar li {
position: relative;
float: left;
width: 140px;
background-color: #606;
height: 20px;
padding: 6px;
margin-left: -20px;
}
#navbar li a {
color: #DD7A00;
font-family: Georgia;
cursor: pointer;
display: block;
text-align: center;
}
#navbar li:last-child {
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-radius-bottomright: 7px;
-webkit-border-radius-bottomleft: 7px;
-khtml-border-radius-bottomright: 7px;
-khtml-border-radius-bottomleft: 7px;
border-radius-bottomright: 7px;
border-radius-bottomleft: 7px;
padding-bottom: 10px;
}
#content {
padding: 6px;
text-align: left;
width: 98.9%;
}
Code (php)
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
61
62
63
64
65
66
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
61
62
63
64
65
66
/* Menu */
#menu {
background-image: url(../images/menu_bg.png);
background-repeat: repeat-x;
height: 40px;
width: 998px;
margin: 0 1px 0 1px;
}
#menu ul .item, .push, .topimg, .bottomimg{
display:none;
}
#menu ul:hover .item{
display:block;
background-image: url(../images/menu_hover.png);
background-repeat: repeat-y;
width: 200px;
}
#menu ul:hover .push {
display: block;
height: 15px;
width: 200px;
background: transparent;
}
#menu ul:hover .topimg {
display: block;
height: 5px;
width: 200px;
background-image: url(../images/menu_top.png);
background-repeat: no-repeat;
}
#menu ul:hover .bottomimg {
display: block;
height: 5px;
width: 200px;
background-image: url(../images/menu_bottom.png);
background-repeat: no-repeat;
}
#menu ul:hover .item a{
color: #FFF;
text-decoration: none;
font-size: 10pt;
font-weight: normal;
padding-left: 12px;
}
#menu ul:hover .item a:hover{
color: #FFF;
text-decoration: underline;
}
#menu ul{
width:100px;
float:left;
list-style:none;
padding: 11px 15px 0 15px;
font-family: helvetica, arial,helvetica,"liberation sans","dejavu sans condensed",sans-serif;
font-weight: bold;
font-size: 13pt;
color: #FFF;
}
#menu .top a{
color: #FFF;
text-decoration: none;
}
#menu .top a:hover{
color: #FFF;
text-decoration: underline;
}
#menu {
background-image: url(../images/menu_bg.png);
background-repeat: repeat-x;
height: 40px;
width: 998px;
margin: 0 1px 0 1px;
}
#menu ul .item, .push, .topimg, .bottomimg{
display:none;
}
#menu ul:hover .item{
display:block;
background-image: url(../images/menu_hover.png);
background-repeat: repeat-y;
width: 200px;
}
#menu ul:hover .push {
display: block;
height: 15px;
width: 200px;
background: transparent;
}
#menu ul:hover .topimg {
display: block;
height: 5px;
width: 200px;
background-image: url(../images/menu_top.png);
background-repeat: no-repeat;
}
#menu ul:hover .bottomimg {
display: block;
height: 5px;
width: 200px;
background-image: url(../images/menu_bottom.png);
background-repeat: no-repeat;
}
#menu ul:hover .item a{
color: #FFF;
text-decoration: none;
font-size: 10pt;
font-weight: normal;
padding-left: 12px;
}
#menu ul:hover .item a:hover{
color: #FFF;
text-decoration: underline;
}
#menu ul{
width:100px;
float:left;
list-style:none;
padding: 11px 15px 0 15px;
font-family: helvetica, arial,helvetica,"liberation sans","dejavu sans condensed",sans-serif;
font-weight: bold;
font-size: 13pt;
color: #FFF;
}
#menu .top a{
color: #FFF;
text-decoration: none;
}
#menu .top a:hover{
color: #FFF;
text-decoration: underline;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="menu">
<ul id="menu items 1">
<li class="top"><a href="#">Menu item</a></li>
<li class="push"> </li>
<li class="topimg"> </li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="bottomimg"> </li>
</ul>
<ul id="menu items 2">
<li class="top"><a href="#">Menu item</a></li>
<li class="push"> </li>
<li class="topimg"> </li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="bottomimg"> </li>
</ul>
</div>
<ul id="menu items 1">
<li class="top"><a href="#">Menu item</a></li>
<li class="push"> </li>
<li class="topimg"> </li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="bottomimg"> </li>
</ul>
<ul id="menu items 2">
<li class="top"><a href="#">Menu item</a></li>
<li class="push"> </li>
<li class="topimg"> </li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="bottomimg"> </li>
</ul>
</div>
Dit werkt in elk geval zoals ik het wil :-)
Deze werkt in elk browser en is met CSS2 gemaakt
Deze werkt ook overal, maar is met CSS3 gemaakt en maakt gebruik van gradients en border-radius (werkt niet in <IE9)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
div
{
opacity: 0;
transition-property: opacity 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition-transition:opacity 0.5s;
}
div:hover
{
opacity: 1.0
}
</style>
div
{
opacity: 0;
transition-property: opacity 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition-transition:opacity 0.5s;
}
div:hover
{
opacity: 1.0
}
</style>
Bedankt Wouter!
Ik ga denk ik toch nog is mijn code wat aanpassen :-)
Code (php)
1
2
3
4
2
3
4
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC')"; /* IE8 & IE9 */
}
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC')"; /* IE8 & IE9 */
}
Wat ik me echter afvraag is hoe je op een goede manier bij de CSS2 de opbouw van het submenu ontwerpt. Dat bestaat namelijk uit een "repeat-able" stuk (y-axis), een top-background en tot slot een bottom-background.
Ik zou dit in principe met allemaal divs willen doen, maar ik wil dat liever niet. Ik ga namelijk met de tijd dit ontwerp in een CMS bouwen, dus de positie van het menu moet automatisch lopen.
En als je meerdere background wil kan je gebruik maken van multiply backgrounds, helaas is dit een CSS3 functie en werkt het nu alleen nog in IE9, FF3.6/4, Chrome en Safari.
Ik wil het inderdaad zoals hierboven. De gradient is aangemaakt, maar daarmee heb ik nog geen afgeronde hoekjes...
http://waldio.webatu.com/CSS/dropdown.html
Hierbij maak ik gebruik van 4 images:
dropdown-li.png - voor de gradient in de menu balk.
dropdown-gradient.png - voor de gradient in de sub items.
dropdown-top.png - voor de ronde hoeken boven
dropdown-bottom.png - voor de ronde hoeken beneden.
Toevoeging op 26/02/2011 15:45:03:
Wat ik me wel even afvraag hoe heb je ervoor gezorgd dat er 1px tussen alle knoppen tussen is?
margin-left: 1px;
dus tussen alle <li> 1 px ruimte