Jiné zvýraznění v menu
Publikováno 30. 10. 2019
V kategorii Menu
Použité štítky: CSS, podtržení, úprava menu

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.

1 komentář

  1. JanaM

    Díky, pomohlo.

    Odpovědět

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Buďte v obraze

Jednou za týden, zpravidla v neděli v dopoledních hodinách, vám pošleme přehled nových článků.
S vašimi daty nakládáme maximálně zopodvědně a uchováváme je v bezpečí. Slouží výhradně k zasílání novinek z našeho webu.

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej