Hovermenu met extend content

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jop B

Jop B

04/04/2020 23:25:37
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$('.menu-item').hover(function(){
  $($this).css( "display", "block" );
});


in de code te verwerken maar helaas.

Codepen
Hoe zou ik dit kunnen oplossen?
 
PHP hulp

PHP hulp

19/03/2024 04:31:59
 
Jan R

Jan R

05/04/2020 10:02:48
Quote Anchor link
Can toch gewoon met html/css
Zelfs perfect met opmaak zie mijn absurde voorbeeld :)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 05/04/2020 10:03:23 door Jan R
 
Thomas van den Heuvel

Thomas van den Heuvel

05/04/2020 12:36:55
Quote Anchor link
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.
Gewijzigd op 05/04/2020 12:37:20 door Thomas van den Heuvel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.