Úvod » Menu hlavička webu » DIVI menu hover efekt po přejetí myši oválné kolečko

DIVI menu hover efekt po přejetí myši oválné kolečko

Menu efekt oválné kolečko

Do modulu pro menu si vložíte CSS třídu s názvem: menu-kruh-3

Do nastavení stránky CSS si vložíte kód níže.

b

Kód

/* Menu efekt oval */
@media screen and (min-width: 981px) {
.menu-kruh-3 a {
margin: 25px 5px; /*zmente si dle libosti*/
}
.menu-kruh-3 a::before,
.menu-kruh-3 a::after {
position: absolute;
top: 15%; /*zmente si dle libosti*/
left: 50%;
width: 60px; /*zmente si dle libosti*/
height: 30px; /*zmente si dle libosti*/
border: 2px solid #fc7e1d; /*zmente si dle libosti*/
border-radius: 50%;
content: “;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}
.menu-kruh-3 a::after {
width: 70px; /*zmente si dle libosti*/
height: 40px; /*zmente si dle libosti*/
border-width: 6px; /*zmente si dle libosti*/
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
transform: translateX(-50%) translateY(-50%) scale(0.8);
}
.menu-kruh-3 a:hover::before,
.menu-kruh-3 a:hover::after,
.menu-kruh-3 a:focus::before,
.menu-kruh-3 a:focus::after {
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);
}
}

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