Hovermenu met extend content

Door Jop B op 04-04-2020 23:25

2.953 views

Goede avond,

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


$('.menu-item').hover(function(){
  $($this).css( "display", "block" );
});

in de code te verwerken maar helaas.

Codepen
Hoe zou ik dit kunnen oplossen?

Jan R

05-04-2020 10:02 gewijzigd op 05-04-2020 10:03

Can toch gewoon met html/css
Zelfs perfect met opmaak zie mijn absurde voorbeeld :)


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

Thomas van den Heuvel

05-04-2020 12:36 gewijzigd op 05-04-2020 12:37

Ik denk dat de topicstarter op zoek is naar een genest dropdown menu.

Als ik < 1 minuut Google op "CSS nested menu" dan levert het tweede resultaat al een oplossing in puur CSS op.

Reageren

Inloggen om te reageren