Techiio-author
Started by Marrine MorelSep 15, 2021

Open
How can I make an animation like this?

0 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWES SHARE

I want to make something like this, just like in the code I wrote, but the problema is that when the animation is back to it's original position, the links stays there but invisible, and I want them to stay in display: none :(

When I always try to make that those links stays in display: none the animation looks like that does not want to work...

HTML

<body>
<nav>
<div class="hamburger">
<span class="hamburger_stick stick1"></span>
<span class="hamburger_stick stick2"></span>
<span class="hamburger_stick stick3"></span>
</div>
<ul class="nav_list_container">
<a class="nav_list_link link1" href="">Servicios</a>
<a class="nav_list_link link2" href="">Contacto</a>
</ul>
</nav>

<header>
<div>
<h1>Eliana Moura</h1>
<h2>Enfermera Profesional Matriculada</h2>
<p>Más de 10 años apoyando y sanando pacientes en la Ciudad de Santa Fe.</p>
<p>Y hoy, ¿cómo te sentís? ¿En qué te puedo ayudar?</p>
<a href="">Leer más</a>
</div>
<div>
<img src="" alt="">
</div>
</header>

CSS

@import "standar";

$color1: #dcf1fb;
$color2: #f8b14c;
$color3: #777887;
$color4: #384e5e;
$typo: 'Ubuntu', sans-serif;

* {
font-family: $typo;
}

body {
width: 100vw;
height: 100vh;
background-color: $color1;
}

header {
background-color: $color1;
}

nav {
display: flex;
flex-direction: row-reverse;
width: 100%;
}

nav .nav_list_container {
display: flex;
flex-direction: row-reverse;
width: 100%;
}

nav .nav_list_container .nav_list_link {
margin: 10px 5px;
padding: 10px 8px;
text-transform: uppercase;
font-weight: bold;
opacity: 0;
transform: translateX(20px);
transition: all .2s ease-in-out;
}

.hamburger {
width: 40px;
height: 30px;
line-height: 5px;
padding: 15px 20px;
}

.hamburger .hamburger_stick {
display: inline-block;
width: 100%;
height: 3px;
margin: auto;
background-color: #000000;
transition: all .2s ease-in-out;
}

.selected {
transform: rotate(-45deg) translate(-3px, 8px);
}

.selected2 {
transform: translateX(20px); opacity: 0;
}

.selected3 {
transform: rotate(45deg) translate(-3px, -8px);
}

.selected4 {
opacity: 1 !important;
display: initial !important;
transform: translateX(0) !important;
}

JS

$(document).ready(function() {

var selected = false

$(".hamburger").click(function() {
$(".stick1").toggleClass("selected")
$(".stick2").toggleClass("selected2")
$(".stick3").toggleClass("selected3")
$(".nav_list_link").toggleClass("selected4")
})

})

0 Replies

You must be Logged in to reply
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance