Úvod » Menu hlavička webu » DIVI menu hover efekt boční čárky

DIVI menu hover efekt boční čárky

Menu efekt boční čárky

Do CSS třídy u menu vložíte menu-carky-1

Kód níže vložíte do stránky přes ozubené kolečko na kartě 

b

Kód

/* Menu efekt carky */
@media screen and (min-width: 981px) {
.menu-carky-1 a::before,
.menu-carky-1 a::after {
display: inline-block;
opacity: 0;
background: #000000;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.menu-carky-1 a::before {
margin-right: 10px; /*muzete si zmenit dle sebe*/
content: ‚|‘; /*znamenko si muzete zmenit za neco jineho*/
color: #000000; /*barvicku vlevo si muzete zmenit za jinou*/
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.menu-carky-1 a::after {
margin-left: 10px; /*muzete si zmenit dle sebe*/
content: ‚|‘; /*znamenko si muzete zmenit za neco jineho*/
color: #000000; /*barvicku vpravo si muzete zmenit za jinou*/
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.menu-carky-1 a:hover::before,
.menu-carky-1 a:hover::after,
.menu-carky-1 a:focus::before,
.menu-carky-1 a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(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