Dropdown menu

Write Down

23/02/2011 17:25:45

Hallo mensen,

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

PHP hulp

15/03/2025 03:45:47

Beheerder

- Ariën -

23/02/2011 17:28:31

Ikzelf gebruik deze:

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

$(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;

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 -

Wouter J

23/02/2011 17:39:12

Dit kan je gewoon met CSS doen, zal er wel even eentje maken. JS is hier niet voor nodig en al helemaal niet jQuery.

Maarten PHP

23/02/2011 17:43:26

Je kan ook een CSS dropdown menu maken.
Waarom altijd javascript?

Write Down

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.

Vincent Huisman

23/02/2011 18:23:30

gewoon met hovers.

met javascript kan je mooiere effecten aan het verschijnen toevoegen en dat het dus niet in 1 keer in je scherm plopt

Maarten PHP

23/02/2011 18:45:16

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

<!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>

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

*, *: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%;
}

Write Down

23/02/2011 18:58:33

Ik heb het volgende van gemaakt:

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

/* 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;
}

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Dit werkt in elk geval zoals ik het wil :-)

Wouter J

23/02/2011 19:15:04

Ik zie dat ik iets te laat ben. Maar alsnog mijn voorbeelden + codes:
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)

Thomas van den Bulk

23/02/2011 19:19:52

je bent me voor wouter, wou net zeggen dat je met CSS3 ook al een heel eind kan komen:

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Write Down

23/02/2011 19:27:05

Bedankt iedereen,
Bedankt Wouter!

Ik ga denk ik toch nog is mijn code wat aanpassen :-)

Joey Drieling

23/02/2011 23:52:30

Grandient werk wel in IE met de filter, border-radius werkt enkel in IE9.

Code (php)

1
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 */
}

Write Down

24/02/2011 20:02:05

Ik verkies de CSS2 versie. Wat ik eventueel kan doen met PHP is de browser detecteren en dan al dan niet CSS3 inladen.

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.

Wouter J

24/02/2011 20:07:52

Hoe wil je dan dat je submenu eruit ziet? Want als je het wil zoals het plaatje boven heb je maar 1 image nodig: De gradient. Deze maak je 1px hoog en laat je repeaten.

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.

Write Down

26/02/2011 09:44:53

Beste Wouter,

Ik wil het inderdaad zoals hierboven. De gradient is aangemaakt, maar daarmee heb ik nog geen afgeronde hoekjes...

Wouter J

26/02/2011 10:54:09

Met behulp van :before en :after is het me gelukt om het voor elkaar te krijgen:
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.

Write Down

26/02/2011 15:27:52

Geweldig, bedankt!

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?

gerhard l

26/02/2011 16:39:51

in de nav li class staat:
margin-left: 1px;

dus tussen alle <li> 1 px ruimte

Forum berichten

Reacties

PHP scripts

PHP tutorials

Actief op PHPhulp

Dropdown menu

Write Down

PHP hulp

- Ariën -

Wouter J

Maarten PHP

Write Down

Vincent Huisman

Maarten PHP

Write Down

Wouter J

Thomas van den Bulk

Write Down

Joey Drieling

Write Down

Wouter J

Write Down

Wouter J

Write Down

gerhard l

Over PHPhulp

Support

Gesponsord

Extra's

Privacy