Aktivní položka menu WordPressu a nebo položka tzv. hover, tedy ta nad kterou je aktuálně umístěn kurzor nemá v základním WordPressu příliš mnoho možností být zvýraznění. V běžném nastavení jde prakticky pouze upravit barvu pozadí a nebo písma, což hlavně u webů, které staví na jednoduchém vzhledu není mnoho možností.

Jak upravit vysouvací menu jsme si ukázali minule. Dnes se tedy podíváme na to, jak upravit základní menu tak, abychom nepoužívali zbytečně moc prvků a zachovali jednoduchý vzhled. Za tímto účel vytvoříme jednoduché podtržení položky která je aktivní a nebo je nad ní umístěn kurzor. Pro trochu oživení bude čára animovaná. To postačí k zaujmutí uživatele, ale není to ještě moc „přeplácané.“

Jednoduché menu

změníme na následující.

Celé provedeme jednoduše vložením CSS do příslušné části v šabloně Divi, tedy v naší známé části Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS, kam vložíme následující CSS:

/*** úprava menu - podtrhávání - Zabza.eu ***/
#top-menu .current-menu-item > a::before,
#top-menu .current_page_item > a::before, #top-menu .current-menu-ancestor > a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu > li > a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #2ea3f2; /*** barva čáry ***/
height: 2px; /*** výška čáry ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu > li > a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}

#top-menu .sub-menu .current_page_item > a::before {display:none;}

To je vše. V zakomentovaných poznámkách naleznete místa, která si můžete upravit podle potřeb. Výsledný efekt můžete opět vidět na této stránce.

Tak hodně zdaru.