Struggling to craft a diagonal navigation system similar to the images below. Despite its seemingly simplicity, I'm stuck investing too much time in figuring it out. My goal is for the menu container to smoothly reveal from right to left when clicking on the hamburger icon. The main challenges lie in handling the navbar change and ensuring a fluid animation for the menu container—is it best for the menu items to remain in place or slide as they appear?
To summarize my dilemmas:
- How can I achieve this design effectively?
- Is duplicating the navbar section necessary?
- What's the best way to reveal the underlying content?
Any guidance on this matter would be greatly appreciated.
https://i.sstatic.net/KhAUw.png https://i.sstatic.net/kKnyo.png
Below is the code snippet I've experimented with:
.hamburger {
z-index: 1001;
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 100px;
overflow: hidden;
#hamburger {
z-index: 1;
position: relative;
top: 18px;
left: 25px;
}
.line {
width: 24px;
height: 2px;
background-color: #fff;
display: block;
margin: 6px auto;
position: relative;
z-index: 2;
transition: all 0.3s ease-in-out;
}
&:hover {
cursor: pointer;
}
&:after {
width: 180px;
height: 180px;
display: block;
background: black;
content: '';
right: 0;
top: 0;
transform: rotate(45deg) translate(-50%, -63%);
}
}
#hamburger.is-active .line {
z-index: 1001;
&:nth-child(2) {
opacity: 0;
}
&:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
&:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
.nav_container {
width: 200%;
height: 100%;
background: black;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
transform: skew(45deg);
transition: opacity 300ms ease-in-out;
opacity: 0;
}
.nav_container.is-open {
display: block;
opacity: 1;
}
.navigation-menu {
background-color: transparent;
pointer-events: none;
min-height: 100%;
position: absolute;
width: 100%;
// transform: translateX(150%);
transform: skew(-45deg);
> * {
pointer-events: auto;
}
&--open {
transform: translateX(0);
& .navigation-menu__bars {
background-color: transparent;
&::before,
&::after {
top: 0;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
.menu-list__item {
opacity: 1;
}
$menu-delay: 1s;
@for $i from 1 through 12 {
.menu-list__item:nth-child(#{$i}) {
transition-delay: $menu-delay;
}
$menu-delay: $menu-delay + .25s;
}
}
}<div class="hamburger">
<div id="hamburger"><span class="line"></span><span class="line"></span><span class="line"></span></div>
</div>
<div class="nav_container">
<nav class="navigation-menu js-nav-menu">
<div class="navbar__menu">
<ul>
<li class='title'><a href="">Home</a></li>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
</ul>
<ul>
<li class='title'><a href="">Home</a></li>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
</ul>
</div>
</nav>
</div>My CSS is in SCSS format, so it might not compile but gives an idea of my progress. Any assistance would be highly valued.