css dropdown menu

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.414
Tsja, een van de basis dingen maar ik vind in css een menu maken lastig blijven. Een menu met 1 laag gaat goed (ook wel eens met hulp) maar als het dropdown moet zijn wordt het lastig.
Ik ben met "het groene boekje" bezig maar kom er nog niet uit. Overigens, W3C op html en css is goed.

Linkje plaatje hoe het moet worden: bekijk plaatje hier
Linkje test website: bekijk site hier

Wat is in ieder geval het probleem, het submenu onder "Verslagen" schiet links in beeld i.p.v. onderaan. Verder moet het submenu breder zijn in verband met langere menuteksten, dat krijg ik ook niet voor mekaar.
Ik heb voor testen het submenu op -10 ipv -9999 pixels gezet dus nu is het meteen links in beeld ;)

Bedankt voor meedenken!
 
Laatst bewerkt:
Dat ziet er goed uit Lauren! Ga ik uitproberen.
 
Nou, Lauren, bijna... met submenu nog niet helemaal. Kom er met marges en paddings niet uit. Wil je even meekijken? linkje
 
Dit is wat je moet veranderen.

Graag gedaan ;)

Code: 
#nav li {
    display:inline-block;
    position:relative;
    float:left;
[COLOR="#FF0000"]    padding: 4px 0px;[/COLOR]  [COLOR="#00AA00"]<-- weghalen[/COLOR]
    background: #f29400; /* oranje */
    }

#nav li a {
    display:inline-block;
    width:100px;
[COLOR="#FF0000"]    line-height:22px;[/COLOR] [COLOR="#00AA00"]<-- veranderen in[/COLOR][COLOR="#FF8C00"] line-height: 30px;[/COLOR]
    padding:0;
    text-decoration:none;
    color:#ffffff;
    }
 
Ah super Lauren! Och ja, de #nav heeft ook line-height van 30px. Bedankt hoor. :thumb:

Nog een vraag om het geheel te snappen. Is het mogelijk om de hover bij de submenu's een andere kleur te maken? Ja het wordt nu wel bont van kleur maar ik bedoel dus dat de hover op home, wijkraad, etc paars blijft maar hover op Agenda, Nieuwsbrieven groen... :rolleyes:
 
Laatst bewerkt:
Geef alle dropdown menu-items in de <li> een class="submenu-item"

In de css
Code: 
    li.submenu-item:hover {
        background: #joukleur;
    }
 
Hey super! Dat moet te doen zijn ;) Vraag kan ik sluiten. Dank je wel nogmaals en prettige dag verder. Hopelijk kan ik jou eens helpen hier op dit forum.
 
Chips... alles omgezet naar WordPress en even testsite gemaakt maar bij current item voor Info menu (let even niet op de plaats waar die nu staat) gaat het mis. Dan worden de onderste menu items ook als geselecteerd gezien en krijgen dus letterkleur zwart. Enig idee waarom dat gebeurd? :eek:
 
Misschien een idee om de gewone menu items class="menu-item" te noemen en de submenu items class="submenu-item". Als je dan in de CSS alles want voor de gewone menu items onder li.menu-item laat vallen en de submenu items onder li.submenu-item los je in ieder geval het probleem op dat submenu items ook de #nav li stijl pakken en niet alleen #nav li li.

Als je er niet uit komt hoor ik het wel :)
 
Nee, kom er niet uit. Ik weet niet hoe ik (omdat het een WordPress website is) de class kan veranderen. Althans 1 class kan ik wel veranderen, de container_class en die heet nu menu-header. Verder natuurlijk wel de container waar het tussen staat. Kijk, in php staat het nu zo:
Code: 
<!-- BEGIN NAVIGATIE -->
  <div id ="nav"> 
    <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
  </div>
Maar misschien snap ik je niet ;)
 
Laatst bewerkt:
Hoi damnsharp,
Bedoel je deze? (op de pagina albuswebdesign.nl/wpmertens/?page_id=14)
Code: 
#menu-nav li li a {
    ...
    color: white !important;
}
Waarom het gebeurt:
Code: 
#menu-nav li.current_page_item a {
    color: #000000; /* zwart */
}
Deze geldt voor alle a's die volgen op een li met class="current_page_item", dus ook voor de a's in de submenu's.
In de oplossing moet er "!important" bij, omdat een li met een class specifieker is dan een li zonder class, en dan de voorrang krijgt. De "!important" maakt deze voorrang weer ongedaan.

=======

Maar als je de regel voor de submenu's volledig uitschrijft, dan kan het ook (want dan is dat weer specifieker):
Code: 
#menu-nav li.current_page_item a {
    color: #000000; /* zwart */
}
#menu-nav li.current_page_item li a {
    color: white;
}

=======

Het valt ook op te lossen met:
Code: 
#menu-nav li.current_page_item > a {
    color: #000000; /* zwart */
}
Door de > geldt de regel nu alleen voor de a's die direct onder de li met class="current_page_item" staan, en niet voor a's die verderop in de stamboom staan.

=======
Verschillende wegen naar Rome, dus! :)
=======

Wil je het hoofdmenu-item ook bij een hover wit laten worden (zoals bij een hover over de andere menu-items), dan komt er bij:
Code: 
#menu-nav li.current_page_item > a:hover {
    color: white;
}
Leesvoer:

Keus genoeg! ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
@Lauren. Het a even groot maken dan de li dat begrijp ik niet, althans ik denk dat je de breedte bedoeld? Maar inderdaad @CSShunter, het probleem is dat alles eronder (alle subitems) zwart geselecteerd worden. Ik gebruik vaker de current_page_item a maar ik zal wat over het hoofd zien waarom het nu mis ging. #menu-nav li.current_page_item li a een kleur white te geven lost het vast op! Fijn. :) En inderdaad hoofdmenu-item met hover wit is super. Zeker die > kende ik niet. Dank voor de leesvoer.
Ik ga wat aanpassen in de programmeren nu.... ja het werkt allemaal.

@Lauren en @CSShunter, dank jullie wel. Een probleem opgelost en ik snap het beter. :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan