Jest to druga odsłona jak nadać niecodzienny wygląd naszemu menu, teraz pobawimy się kolorami oraz dodamy ikony, oraz kilka innych efektów

Zobacz poradnik

/* shine */


#header .top-menu li a[data-depth="0"]:hover {
    background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s infinite linear;
    animation-fill-mode: forwards;
}

@keyframes shine {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 180px;
    }
}

/* podkreslenie */


#header .top-menu li a[data-depth="0"] {
    background-position: bottom left;
    background-size: 0% 5px;
    background-image: linear-gradient(#6666f6, #1915cc);
    background-repeat: no-repeat;
    padding-bottom: 5px;
    transition: all 500ms ease-in-out;
   } 

   #header .top-menu li a[data-depth="0"]:hover {
    background-size: 100% 5px;
   } 

/* podkreslenie i tło */


#header .top-menu li a[data-depth="0"] {
    position: relative; 
    z-index:9; 
}
#header .top-menu li a[data-depth="0"]::after {
   position:absolute;
   content:'';
   width: 0px;
   height: 0px;
   background: #e0e0e0;
   bottom: 0;
   left:0;
   transition: all .5s;
}

#header .top-menu li a[data-depth="0"]:hover::after {
   width: 100%;
   height: 3px;
}

#header .top-menu li a[data-depth="0"]::before {
   position:absolute;
   content:'';
   width: 100%;
   height: 0;
   left:0;
   background: #e0e0e0;
   bottom: 0;
   transition: all .5s;
   transition-delay: .5s;
   z-index: 1;
   
}

#header .top-menu li a[data-depth="0"]:hover::before {
   height: 100%;
   z-index: -1;
}