Forum » Client-Side scripting » Dropdown menu probleem
beronne
Berichten: 50
avatar
Offline Stuur privebericht
Beste webdesigners,

ik zit met een best wel ingewikkeld probleem.
Ik heb een website klaar in photoshop en ben hem
aan het slicen. maar nu het volgende wat ik aan de
hand van plaatjes laat zien.

Het menu komt er zo uit te zien:
Afbeelding

Nu als je met de muis er over heen gaat wil ik het volgende krijgen
Afbeelding

natuurlijk niet alleen bij het tabblad vereniging maar als ik er 1 heb weet ik ook
hoe ik de rest moet doen.


ik heb al wat dingen geprobeerd maar ik krijg het niet voorelkaar.

kan iemand mij helpen of mij op weg helpen hoe en wat.
ik zou u echt heel heel erg dankbaar wezen

Met vriendelijke groeten,

Bham
Laatst gewijzigd door beronne op 2011-01-02 01:05:37
30-12-2010 23:23
Dit topic is 173 keer bekeken door 38 verschillende leden
Reacties op: "Dropdown menu probleem"
1
Cas
BuitengewoonUniek.nl
Berichten: 1156
avatar
Offline Stuur privébericht
Hiervoor kun je het beste jQuery gebruiken.
31-12-2010 00:01
NielsB
Webdeveloper & Programmeu
Berichten: 1000
avatar
Offline Stuur privébericht
@cas hoezo zou je hier voor jquery moeten gebruiken?
je kan simpel weg gebruik maken van een ul li:hover.

graag zie ik voorbeeld hoe de ts het nu heeft.
natuurlijk wel in html en css!
31-12-2010 00:19
beronne
Berichten: 50
avatar
Offline Stuur privébericht
Quote: NielsB

@cas hoezo zou je hier voor jquery moeten gebruiken?
je kan simpel weg gebruik maken van een ul li:hover.

graag zie ik voorbeeld hoe de ts het nu heeft.
natuurlijk wel in html en css!



ik heb een begin gemaakt met het dropdown menu en geupload naar het volgende adres:
http://www.rbvhoogeveen.nl/nieuw

ben alleen bezig geweest voor het menu knop home

de html en css code heb ik als volgt

HTML:
Code | Selecteer Alles
minimaliseren
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>R.B.V. Hoogeveen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/menu.css" />    
</head>

<body>
<div id="main-wrapper"> <!-- wrapper om hele site -->

    <div id="bg-image"></div>

    <div id="menu-balk"> <!-- begin menu -->
        <div id="navigatie">
            
            <ul id="nav">
                <li><a href="index.php">Home</a>
                    <ul>
                        <li><a href="#">test0</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test2</a></li>
                        <li><a href="#">test3</a></li>
                        <li><a href="#">test4</a></li>
                        <li><a href="#">test5</a></li>
                        <li><a href="#">test6</a></li>                   
                     </ul>
                </li>
              </ul>
            
        </div>
    </div> <!-- einde menu -->

</div> <!-- einde main wrapper -->

</body>
</html>


CSS:
Code | Selecteer Alles
minimaliseren
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
#navigatie {
    position: absolute;
    font-size: 16px;
    font-family: Calibri;
    margin-top: 11px;
    margin-left: 20px;
}

#nav, #nav ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#nav li {
     float: left;
     width: 120px;
}

#nav ul {
     position: absolute;
     width: 120px;
    left: -1000px;
} 

#nav li:hover ul {
     left: auto;
    padding: 4px;
    background-image: url(../images/bg-hover.png);
    background-repeat: no-repeat;
}

#nav a {
    display: block;
}



ik heb de hover nu als hele image gedaan, maar de hover moet mee gaan met het aantal sublinks. hoe krijg ik dit voor
elkaar heb er al best mee zitten kloten als ik dit mag zeggen.

nu zit ik nog met 2 vraagjes:

Afbeelding
zoals u op de afbeelding zit moet ik nog een wit vak om de hoofd tekst
heen krijgen die weer mooi moet aansluiten op de hover en nog tussen stukjes per kop vb Home | Vereniging

hou raden jullie mij dit aan om te doen
02-01-2011 01:02
Reageer op: "Dropdown menu probleem"
1
Je kan niet reageren omdat je niet bent ingelogd. Inloggen of Aanmelden