Úvod » Menu hlavička webu » DIVI menu hover efekt spodní podtržení

DIVI menu hover efekt spodní podtržení

Menu efekt spodní podtržení

V nastavení menu půjdete do záložky pokročilé a vložíte si CSS třídu: menu-spodni-podtrzeni-2

Ve stránce, kde máte menu, si v nastavení > pokročilé zadáte kód níže.

b

Kód

/* Menu efekt spodni podtrzeni */
@media screen and (min-width: 981px) {
.menu-spodni-podtrzeni-2 a {
padding: 8px 0; /*toto muzete menit*/
margin-bottom: 5px; /*toto muzete menit*/
}
.menu-spodni-podtrzeni-2 a::after {
position: absolute;
top: 70%; /*toto muzete menit*/
left: 0;
width: 100%;
height: 2px; /*timto můzete menit tloustku podtrzeni*/
background: #000; /*timto můzete menit barvu podtrzeni*/
content: “;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
.menu-spodni-podtrzeni-2 a:hover::after,
.menu-spodni-podtrzeni-2 a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
}

Moje motto: „Tvorba webových stránek ubírá mi spánek“. Baví mě tvorba webových stránek s redakčním systémem WordPress a vše kolem webů takže grafika, SEO optimalizace a protože jsem bývalá účetní, tak samozřejmě i troška číslíček v marketingu a PPC kampaně. To co umím předávám i dále a to pomocí školení WordPress a také jsem se odhodlala a začala už konečně psát „blog“, za který mě strýček Google nebude mít rád, protože nejsem žádný pisálek a ty mé příspěvky jsou hodně stručné bez omáčky okolo, tak alespoň doufám, že jsou výstižné. Na druhou stranu ten můj blogíček funguje hlavně pro mě jako takový vzpomínáček.

Radka Jiránková

webdesigner, udelam-web.cz