Animerad hover-effekt med CSS – utan JavaScript

Ibland kan du vilja ge din hemsida en liten touch av finess. Effekter fungerar bäst och är också snyggast när de används i det lilla, för att ge en förhöjd upplevelse med snygga detaljer – inte när de snygga effekterna är själva huvudattraktionen på en hemsida.

Här är en lite genomgång av hur du kan skapa en snygg linje under dina meny-länkar med hjälp av enbart CSS.

Det du kommer skapa är en ”hover”-effekt, alltså något som syns när användaren rör pilen över länken, för att sedan försvinna när de drar pilen bort från länken.

Här är koden för att skapa effekten. Märk att du kan behöva ändra klasser för att få det att passa din hemsida, dessa css-klasser är lämpade för Genesis Framework, det WordPress-tema jag använder när jag bygger hemsidor.

Koderna sätter du i din hemsidas stilschema, i mitt fall (och de flesta fall) style.css.

.genesis-nav-menu .current-menu-item>a::after,
.genesis-nav-menu a::after {
    background-color: #7CB1E5;
    content: '';
    display: block;
    height: 1px;
    position: relative;
    top: 6px;
    width: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.genesis-nav-menu a:hover:after {
    width: 100%;
}

Lägg märke till att width: 0; i det normala läget, men sedan växlar till width: 100%; i ”hover”-läget. Det ger din länk en effekt av att ”komma in” från vänster när du rör pilen över länken, och när du lämnar länken går den tillbaka från höger till vänster.

Här under är en tilläggs-kod för att säkerställa att denna effekt bara går på huvudmenyn och inte på undermenyerna:

.genesis-nav-menu .sub-menu a::after {
    display: none;
}

Det är enkelt och effektivt. Som sagt, effekter är bäst när de verkar i det lilla. Vad tycker du?