Tijden veranderen
Nested LI onClick
Ik heb een 2 laags menu gemaakt, en wil graag met onclick werken. Echter ik heb het volgende probleem :
wanneer ik op de onclick van de level 2 LI wil klikken, pakt hij alsnog de level 1 onclick.
Na 2 uur proberen helaas nog steeds geen oplossing. Misschien dat iemand met een verse kijk hier een antwoord op weet.
menu opbouw:
<ul>
***<li onclick="document.location.href=\''.$link.'\'"">Level 1
******<ul>
*********<li onclick="document.location.href=\''.$link.'\'"">Level 2</li>
******</ul>
</ul>
Weet iemand hier een goede oplossing voor? Mag voor mijn part met div's, z-index.. in ieder geval iets dat werkt. Het liefst geen (complexe)javascript.
Met vriendelijke groet,
Raoul
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
echo <<<HTML
<li>
<a href="$link1">Level 1</a>
<ul>
<li>
<a href="$link2">Level 2</a>
</li>
</ul>
</li>
HTML;
<li>
<a href="$link1">Level 1</a>
<ul>
<li>
<a href="$link2">Level 2</a>
</li>
</ul>
</li>
HTML;
is net iets anders. Waarom kies jij voor een klik op een li?
Edit: ingesprongen voor het inzicht
Gewijzigd op 21/12/2010 12:02:53 door Bas Cost Budde
@raoul, je sluit je eerste li niet af
De reden waarom ik een onclick wil is omdat de gebruiker in het gehele LI-veld kan klikken, in plaats van alleen de link (die tevens klikbaar is, maar meer voor google bedoeld is)
--EDIT--
Opgelost door een DIV-je om de <a> tag te zetten, en op die DIV een onClick gezet. Op deze manier word de DIV automatisch even groot als de LI
Gewijzigd op 21/12/2010 10:08:13 door raoul vd rijt
Edit: @Raoul, wanneer het helpt om een div rond de a te zetten, helpt het dan misschien ook om je a in CSS een display:block te geven?
Gewijzigd op 21/12/2010 10:39:00 door Bas Cost Budde
Sorry voor CAPS maar ik erger me groen en geel aan de mensen die niet eens fatsoenlijk html kunnen/willen leren en dat mensen ze ook nog eens gaan helpen met de vieze lelijke oplossingen. Javascript is ook nog eens slecht voor de SEO, google ziet dit niets als een menu omdat het javascript oftewel hij indexeert de pagina's ERG slecht!
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
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
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
ul {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
padding: 0;
margin: 0 15px 0 0;
}
ul li a {
float: left;
display: block;
padding: 2px 10px;
background: red;
text-decoration: underline;
}
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
ul {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
padding: 0;
margin: 0 15px 0 0;
}
ul li a {
float: left;
display: block;
padding: 2px 10px;
background: red;
text-decoration: underline;
}
etc etc etc
PS kan zijn dat het nog even getest moet worden, heb het even snel getypt zonder te testen.
@vincent, motiveer je antwoord even, de html is goed..
Gewijzigd op 21/12/2010 12:02:07 door Joakim Broden