Navigatiemenu; current selected item en subitem aanduiding

Als je zelf thema’s gaat bouwen is het goed om te weten dat je in WordPress een hoop kunt bereiken met css code alleen; WordPress gebruikt vaste selectors die je altijd kunt aanspreken.

Het meestal horizontale menu bovenin (navigatiemenu) bijvoorbeeld. Laten we beginnen met: Current selected item. We kunnen met de selectors: a, a:hover, a:visited, a:active een aantal css manipulaties toepassen. Maar wat je langs deze weg niet bereikt; Het geklikte item highlighten. (Soms zijn die menu items gehighlighted met een streep onder het item of de hele background is anders).

Met de volgende code kun je dit oplossen:

.current-menu-item a
{

border-left:0px solid;
border-top:0px solid;
border-right:1px solid;
border-bottom:1px solid;
border-bottom-color :#888;
border-right-color: #888;
-webkit-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
background-color:rgba(255,255,255,0.125);
}

Let op! Het gaat niet om de css code tussen de accolade’s, maar om de selector: .current-menu-item a Wat je tussen de accolade’s zet is jouw keuze.

Dan gaan we naar: Subitem aanduiding.

 We zien ook welke menu items subpagina’s bevatten door een aanduiding met een ‘+’ of iets anders. Zweven of hoveren we daarboven met de muis dan komt er een menu. Het gaat om die ‘+’ of een door jou gekozen teken. Dit bereiken we met de volgende css code:

/******** vertical arrow top menu sub items ********/
.nav-menu li > a:after
{
color: #000;
content: ‘ ∨’;
}

.nav-menu li > a:only-child:after
{
content: ”;
}
/***************************************************/

Met color: #000; bepaal je de kleur voor het subitem symbool en: content: ‘ ∨’; is het symbool dat wordt gebruikt voor de aanduiding van subitems in het menu.

Details, maar zeker niet onbelangrijk!

 

Succes!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *