Nedávno jsme si ukázali jak je možné zvýraznit položky menu jejich podtržením, jenže nemusí zůstat jen u toho. Někteří tvůrci stránek nejsou milovníky minimalismu a i někteří majitelé webů chtějí poněkud výraznější zvýraznění. Připravil jsem si proto několik jednoduchých možností, jak menu obohatit o některé efekty.

Dnes to bude zvýraznění položky menu pod kurzorem a to tak, že v položce jakoby přejede výplň z levé strany na pravou.

Je to zcela jednoduché. Přidáme pouze do Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS následující CSS:

/*** Zvyrazneni menu - posun vyplne doprava - Zabza.eu ***/
    #top-menu li {
        padding-right: 2px;}
 
    #top-menu > li > a {
        padding: 15px 15px!important;
        margin-bottom: 15px;}
 
    #top-menu .menu-item-has-children > a:first-child:after {
        display:none;}
 
    #top-menu-nav > ul > li > a {
        background: #ececec;
        opacity: 1;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;}
 
    #top-menu-nav > ul > li > a:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #2098D1;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;}
 
    #top-menu-nav > ul > li > a:hover, 
    #top-menu-nav > ul > li > a:focus, 
    #top-menu-nav > ul > li > a:active {
        color: #fff;}
 
    #top-menu-nav > ul > li > a:hover:before, 
    #top-menu-nav > ul > li > a:focus:before, 
    #top-menu-nav > ul > li > a:active:before {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);}

A je hotovo. Zítra si ukážeme podobnou a možná i efektnější úpravu.