Animacja - wysuwany pasek

pytanie zadane 14 października 2017 w JavaScript przez michh123 Bywalec (2,790 p.)

Witam,

W jaki sposób można wykonać animację przewijającego się paska po najechaniu myszką na link/element.
Chodzi mi o dokładnie taki sam efekt jak na tej stronie w sekcji menu
https://www.javascript.com
Kiedy najeżdżamy na link, pasek przewija się od lewej do prawej. Jak wykonać taką animację?

Proszę uprzejmie o pomoc,
Pozdrawiam!

1 odpowiedź

odpowiedź 14 października 2017 przez Pietrak Pasjonat (18,850 p.)

Za pomocą pseudoelementów np after. Ustawiasz transition, stałą wysokość, a szerokość na 0. Po najechaniu ustawiasz szerokość 100%.

Polecam skorzystać ze zbadaj element, by następnym razem sprawdzić jak coś jest zrobione.

Pokaż 7 poprzednich komentarzy

komentarz 15 października 2017 przez michh123 Bywalec (2,790 p.)

Ja chyba jestem głupi bo to dalej nie działa...

1	komentarz 15 października 2017 przez xmentor Nałogowiec (49,520 p.) Pokaż jak zrobiłeś.

komentarz 15 października 2017 przez michh123 Bywalec (2,790 p.)

Prosze. Te linie które się zmieniły oznaczyłem komentarzem

.container{
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 20px;
}

header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #252525;
    padding: 15px 0 15px 0;
    height: 38px;
    border-bottom: #f86e51 2px solid;
    z-index: 1;
	font: 15px/1.5 'Arial', sans-serif;
}

header nav{
    float: right;
    margin-top: 10px;
}

header a{
    color: #fff;
    text-decoration: none;
    font-size: 14.5px;
    transition: all 0.2s ease-in-out;
}

header a:hover{
    color: #f86e51;
}

header li{
    float: left;
    display: inline;
    padding: 0 15px 0 15px;
}

.nav ul{
    margin: 0;
    padding: 0;
}

.nav{
    margin-top: 10px;
}

/*to się zmieniło*/

.underline{
	position: relative;
	text-decoration: none;
}

.underline::before{
	background: #f86e51;
	transform: translateX(0);
	transition: transform .3s ease-in-out;
	z-index: 1;
	content: '';
	height: 2px;
	position: absolute;
	width: 0;
	left: 0;
}

.underline::before:hover{
	width: 100%;
}