Drop down menu on hover of klikken?
Weet iemand hoe ik een drop down menu kan maken met een gratis template van chocolatemonster die ik heb gevonden?
De css code
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#navigation { height: 52px; padding-top: 4px; font-family: 'Ubuntu', sans-serif; font-weight: 700; background: url(images/navigation.png) repeat-x 0 0; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); }
#navigation ul { list-style: none; list-style-position: outside; }
#navigation ul li { float: left; padding-right: 2px; line-height: 52px; background: url(images/nav-border.png) no-repeat right 0; font-size: 13px; text-transform: uppercase; }
#navigation ul li a { display: block; padding: 0 32px 0 28px; color: #878787; }
#navigation ul li a:hover,
#navigation ul li.active a { text-decoration: none; color: #2b9208; }
#navigation ul li.first a { padding-left: 38px; }
#navigation a.nav-btn { display: none; }
#navigation ul { list-style: none; list-style-position: outside; }
#navigation ul li { float: left; padding-right: 2px; line-height: 52px; background: url(images/nav-border.png) no-repeat right 0; font-size: 13px; text-transform: uppercase; }
#navigation ul li a { display: block; padding: 0 32px 0 28px; color: #878787; }
#navigation ul li a:hover,
#navigation ul li.active a { text-decoration: none; color: #2b9208; }
#navigation ul li.first a { padding-left: 38px; }
#navigation a.nav-btn { display: none; }
Het menu
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<nav id="navigation">
<a href="#" class="nav-btn">HOME<span class="arr"></span></a>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">Service</a></li>
<ul>
<li><a href="#">Binnen </a></li>
<li><a href="#">Buiten</a></li>
</ul>
<li><a href="#">contact</a></li>
<li><a href="#">locatie</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
<a href="#" class="nav-btn">HOME<span class="arr"></span></a>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">Service</a></li>
<ul>
<li><a href="#">Binnen </a></li>
<li><a href="#">Buiten</a></li>
</ul>
<li><a href="#">contact</a></li>
<li><a href="#">locatie</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
Wat ik wil krijgen is dat wanneer ik de menu aanklik of eroverheen "hover" dat er dan een submenu onder verschijnt. Ik hoop dat dit duidelijk is!
Gewijzigd op 23/12/2013 16:16:30 door Danny T
- Aar - op 23/12/2013 15:37:05:
Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.
Albert de Wit op 23/12/2013 16:08:58:
Ik wil je best helpen met een css dropdown menu maar gooi dan niet je hele code hier neer, dat komt een beetje over als 'Hier is mijn code, ik kom over 5 minuten terug voor het antwoord, succes!'. Post even de relevante code, welke code je gebruikt voor je menu/navigatie.
Sorry ik heb het verbeterd. Bedankt voor de hulp.
Danny T op 23/12/2013 16:14:19:
Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.
- Aar - op 23/12/2013 15:37:05:
Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.
Laat die code eens zien, dan weten we wat er fout aan is. Een praktisch voorbeeld kan ook interessant zijn.
Gewijzigd op 23/12/2013 16:25:40 door - Ariën -
- Aar - op 23/12/2013 16:25:23:
Laat die code eens zien, dan weten we wat er fout aan is. Een praktisch voorbeeld kan ook interessant zijn.
Danny T op 23/12/2013 16:14:19:
Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.
- Aar - op 23/12/2013 15:37:05:
Ik heb deze geprobeerd te volgen maar wat ik kreeg waren 3 lijnen en de menu op de tweede en derde lijn kon ik niet meer aanklikken toen ik meerdere links wou toevoegen. Alsnog bedankt.
Laat die code eens zien, dan weten we wat er fout aan is. Een praktisch voorbeeld kan ook interessant zijn.
De code deed het niet en gooide ik dus weg, maar ik heb het wel kunnen reproduceren.
Binnen en buiten horen submenus te zijn maar zijn nu verdwenen. Ik heb het weer geupload naar de site.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav id="navigation">
<a href="#" class="nav-btn">HOME<span class="arr"></span></a>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">Service</a></li>
<ul>
<li><a href="#">Buiten </a></li>
<li><a href="#">Buiten</a></li>
</ul>
<li><a href="#">contact</a></li>
<ul>
<li><a href="#">binnen</a></li>
<li><a href="#">binnen</a></li>
<li><a href="#">binnen</a></li>
</ul>
<li><a href="#">locatie</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
<a href="#" class="nav-btn">HOME<span class="arr"></span></a>
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">Service</a></li>
<ul>
<li><a href="#">Buiten </a></li>
<li><a href="#">Buiten</a></li>
</ul>
<li><a href="#">contact</a></li>
<ul>
<li><a href="#">binnen</a></li>
<li><a href="#">binnen</a></li>
<li><a href="#">binnen</a></li>
</ul>
<li><a href="#">locatie</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</nav>
ik heb deze code van de website toegevoegd.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#navigation ul ul {
display: none;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation ul:after {
content: ""; clear: both; display: block;
}
display: none;
}
#navigation ul li:hover > ul {
display: block;
}
#navigation ul:after {
content: ""; clear: both; display: block;
}
Gewijzigd op 23/12/2013 16:36:21 door Danny T
Je hebt vanaf lijn 6 een <ul> in een <ul>. Dat mag niet.
De children van een <ul> moeten <li>'s zijn. Niets anders.
Zeker wanneer je met javascript werkt, moet je zien dat de DOM correct is.
Gewijzigd op 23/12/2013 16:57:46 door Kris Peeters
Kris Peeters op 23/12/2013 16:52:43:
Mag ik even opmerken:
Je hebt vanaf lijn 6 een <ul> in een <ul>. Dat mag niet.
De children van een <ul> moeten <li>'s zijn. Niets anders.
Zeker wanneer je met javascript werkt, moet je zien dat de DOM correct is.
Je hebt vanaf lijn 6 een <ul> in een <ul>. Dat mag niet.
De children van een <ul> moeten <li>'s zijn. Niets anders.
Zeker wanneer je met javascript werkt, moet je zien dat de DOM correct is.
Waarom is dat zo?? Ik heb alleen gekeken bij de voorbeeld site die ik kreeg waarin ze dat wel hadden.
2e stuk
hierin gebruiken ze ook een ul in een ul. O.o
Niet een ul in een ul
Wat wel mag, is iets zoals dit
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
<li>
</li>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
Gewijzigd op 23/12/2013 16:59:21 door Kris Peeters
Kris Peeters op 23/12/2013 16:57:20:
Nee, daar zetten ze een ul in een li
Niet een ul in een ul
Wat wel mag, is iets zoals dit
Niet een ul in een ul
Wat wel mag, is iets zoals dit
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
<li>
</li>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
Aha ik begrijp het!
Maar nu springt alles heen en weer, hoe kan ik dat stoppen?
Toevoeging op 23/12/2013 18:13:33:
Ik heb verder gewerkt en kheb nu denk ik nog maar 1 probleem en dat is dat de submenus niet tevoorschijn komen!! voor de rest is het goed denk ik. Wat moet ik nu doen?