Hovermenu met extend content
Met jQuery probeer ik menu content te laten zien met de hover functie.
De content zit niet in een child elementen wegens styling.
Het openen en sluiten van de content elementen werkt maar alleen als je over de menukopjes heen gaat.
Stel dat ik over item2 heen ga dan opent content item2 waarin ik straks sub links heb staan. Wil ik dan naar een sub link in de content dan sluit de content zich omdat ik ik menukopje item2 niet meer hover.
Ik dacht dit op te lossen door
Code (php)
1
2
3
2
3
$('.menu-item').hover(function(){
$($this).css( "display", "block" );
});
$($this).css( "display", "block" );
});
in de code te verwerken maar helaas.
Codepen
Hoe zou ik dit kunnen oplossen?
Zelfs perfect met opmaak zie mijn absurde voorbeeld :)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="nl-be">
<head>
<title>testje</title>
<meta charset="utf-8">
<style>
p:hover:after {
content:attr(data-info);
position:fixed;
top:50%;
left:50%;
background-color:red;
color:Yellow;
font-size:55px;
}
</style>
</head>
<body>
<p data-info="Mijn info">paraf 1</p>
<p data-info="Mijn andere info">paraf 2</p>
</body>
</html>
<html lang="nl-be">
<head>
<title>testje</title>
<meta charset="utf-8">
<style>
p:hover:after {
content:attr(data-info);
position:fixed;
top:50%;
left:50%;
background-color:red;
color:Yellow;
font-size:55px;
}
</style>
</head>
<body>
<p data-info="Mijn info">paraf 1</p>
<p data-info="Mijn andere info">paraf 2</p>
</body>
</html>
Gewijzigd op 05/04/2020 10:03:23 door Jan R
Als ik < 1 minuut Google op "CSS nested menu" dan levert het tweede resultaat al een oplossing in puur CSS op.
Gewijzigd op 05/04/2020 12:37:20 door Thomas van den Heuvel