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 Categories
15
Software39
DevOps45
Frontend Development24
Backend Development20
Server Administration17
Linux Administration24
Data Center24
Sentry24
Terraform21
Ansible29
Docker28
Penetration Testing14
Kubernetes16
NGINX19
JenkinsX17
Techiio

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:

facebooklinkdeintwitter

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Copyright techiio.com @2020 Kolkata, India
made with by Abhishek & Priyanka Jalan
Copyright techiio.com @2020
made with by Abhishek & Priyanka Jalan