animated-navigation

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"

integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="

crossorigin="anonymous"

/>

<style>

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #eafbff;

background-image: linear-gradient(

to bottom,

#eafbff 0%,

#eafbff 50%,

#5290f9 50%,

#5290f9 100%

);

font-family: 'Muli', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

nav {

background-color: #fff;

padding: 20px;

width: 80px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 3px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

transition: width 0.6s linear;

overflow-x: hidden;

}

nav.active {

width: 350px;

}

nav ul {

display: flex;

list-style-type: none;

padding: 0;

margin: 0;

width: 0;

transition: width 0.6s linear;

}

nav.active ul {

width: 100%;

}

nav ul li {

transform: rotateY(0deg);

opacity: 0;

transition: transform 0.6s linear, opacity 0.6s linear;

}

nav.active ul li {

opacity: 1;

transform: rotateY(360deg);

}

nav ul a {

position: relative;

color: #000;

text-decoration: none;

margin: 0 10px;

}

.icon {

background-color: #fff;

border: 0;

cursor: pointer;

padding: 0;

position: relative;

height: 30px;

width: 30px;

}

.icon:focus {

outline: 0;

}

.icon .line {

background-color: #5290f9;

height: 2px;

width: 20px;

position: absolute;

top: 10px;

left: 5px;

transition: transform 0.6s linear;

}

.icon .line2 {

top: auto;

bottom: 10px;

}

nav.active .icon .line1 {

transform: rotate(-765deg) translateY(5.5px);

}

nav.active .icon .line2 {

transform: rotate(765deg) translateY(-5.5px);

}

</style>

<title>3D Boxes Background</title>

</head>

<body>

<button id="btn" class="magic">Magic 🎩</button>

const nav = document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))</script>

</body>

</html>