<body>
<header
class="container flex justify-between items-center h-8 mt-8 px-4 mx-auto"
>
<div class="logo">
<a href="/" aria-label="home">
<span class="text-white font-medium text-lg">@jpcarvalho</span>
</a>
</div>
<div id="navigation__toggle" class="flex flex-col w-12 my-auto ">
<span
id="navigation__toggle__one"
class="bg-white w-full h-0.5 w-12"
></span>
<span
id="navigation__toggle__two"
class="bg-white w-full h-0.5 w-12 mt-2"
></span>
</div>
</header>
<div
id="menu"
class="mx-auto absolute left-0 top-0 w-screen"
>
<div class="flex flex-row justify-center w-full mt-32">
<div id='menu_item' class="flex flex-col gap-y-8 text-center">
<span class="text-4xl text-white font-bold">
Home
</span>
<span class="text-4xl text-white font-bold">
About Me
</span>
<span class="text-4xl text-white font-bold">
Portfolio
</span>
<span class="text-4xl text-white font-bold">
Blog
</span>
<span class="text-4xl text-white font-bold">
Open Source
</span>
</div>
</div>
</div>
</body>
body {
background: #00a8ff;
margin: 0;
}
#navigation__toggle {
z-index: 10;
cursor: pointer;
}
.logo {
z-index: 10;
}
#navigation__toggle span {
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.navigation__toggle__one__animation {
transform: translateY(5px) rotate(45deg);
}
.navigation__toggle__two__animation {
transform: translateY(-5px) rotate(-45deg);
}
#menu {
background: #00cec9;
height: 0vh;
transition: height 2s cubic-bezier(0.25, 0.1, 0.25, 1);
z-index: -10;
}
.menu_activated {
z-index: 5 !important;
height: 100vh !important;
}
#menu_item span {
opacity: 0;
cursor: pointer;
text-decoration: none;
transition: opacity 0.5s cubic-bezier(0.38, 0.18, 0, 1);
}
#menu_item span:hover {
color: #6c5ce7;
text-decoration: underline;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.menu_item_animation {
opacity: 1 !important;
}
document.getElementById('navigation__toggle').addEventListener('click', e => {
let navigation__toggle__one = document.getElementById(
'navigation__toggle__one'
);
let navigation__toggle__two = document.getElementById(
'navigation__toggle__two'
);
navigation__toggle__one.classList.toggle(
'navigation__toggle__one__animation'
);
navigation__toggle__two.classList.toggle(
'navigation__toggle__two__animation'
);
document.getElementById('menu').classList.toggle('menu_activated');
let menuItems = document
.querySelectorAll("#menu_item span");
[].forEach.call(menuItems, function(item) {
item.classList.toggle('menu_item_animation');
});
});
This Pen doesn't use any external JavaScript resources.