I’m building a hamburger nav using this. https://codepen.io/erikterwan/pen/EVzeRP I added a sub-menu to one of the li elements, but those links are unfollowable. I believe that the problem is that the menu is closing before the link can be followed, but I can’t figure out how to fix that.
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li class="">
<div tabindex="0" class="onclick-menu">Portfolio
<ul class="onclick-menu-content">
<li><a href="families.html">Families</a></li>
<li><a href="seniors.html">Seniors</a></li>
<li><a href="couples.html">Couples</a></li>
</ul>
</div>
</li>
<li><a href="about.html">About</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
#menuToggle {
display: block;
position: relative;
top: -8em;
padding-left: 2em;
z-index: 1;
-webkit-user-select: none;
user-select: none;
width: fit-content;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
left:-12px;
background: #5FCBDB;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background:white;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #3F6A6A;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul {
transform: none;
}
.onclick-menu:focus {
/* clicking on label should toggle the menu */
pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
/* opacity is 1 in opened state (see below) */
opacity: 1;
visibility: visible;
display: inherit;
/* don't let pointer-events affect descendant elements */
pointer-events: auto;
}
.onclick-menu-content {
/* use opacity to fake immediate toggle */
display: none;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
.onclick-menu-content li{
list-style: none;
}
