Hovermenu met extend content

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java developer met testervaring

Java developer met testervaring Functieomschrijving "De drempel tussen de burger en de Belastingdienst zo laag mogelijk houden: dat is de belangrijke taak van ons team. Dit doen we door het burgerportaal Mijn Belastingdienst continu te verbeteren." René, Java-specialist bij de Belastingdienst. De keten Interactie is een samenwerkingsverband van alle dienstonderdelen binnen de Belastingdienst. Samen zorgen we dat het contact met burgers en bedrijven goed kan plaatsvinden. Onze belangrijkste opgave? Zoveel mogelijk digitaliseren. Dat doen we binnen het onderdeel Informatievoorzieningen (IV), de ICT-organisatie van de Belastingdienst. Denk bij de producten die IV-Interactie ontwikkelt en onderhoudt aan portalen, formulieren en authenticatie- en

Bekijk vacature »

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

22/10/2021 06:14:49
 
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.