Css menu does not close after click

HTML & CSS
1

I have a full screen menu. If I link the menu with another page, it works just fine. However, if I only link it with an anchor, the menu does not close after the click. Can somebody help me.

This is my second problem and if I solve that, I am done bothering you :slight_smile:

Thanks

HTML

<div class="navigation">
    <input type="checkbox" class="navigation__checkbox" id="navi-toggle">
    <label for="navi-toggle" class="navigation__button">
      <span class="navigation__icon">&nbsp;</span>
    </label>
    <div class="navigation__background"></div>
    <nav class="navigation__nav">
      <ul class="navigation__list">
        <li class="navigation__item"><a href="http://www.previewpage.ch/ltp1/Startseite.html#sec-1647" class="navigation__link">Was ist Lerntherapie</a></li>
      </ul>
    </nav>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto&display=swap');

.test{
    box-sizing: border-box;
}

*::before,
*::after{
    box-sizing: inherit;
}

html{
    font-size: 62.5%;
}

body{
    height: 100vh;
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.42;
    margin: 0;
}

 h1{
    color: #fff;
    padding: 20rem 8rem;
}

h2{
  padding: 0 3rem;
}
.navigation__checkbox{
    display: none;
	
}

.navigation__button{
    background-color: #fff;
    height: 5rem;
    width: 5rem;
    position: fixed;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 100;
    box-shadow: 2rem 0.5rem 2rem rgba(155, 154, 154, 0.482);
    text-align: center;
    cursor: pointer;
}


.navigation__icon{
    position: relative;
    margin-top: 2.5rem;
}

.navigation__icon, .navigation__icon::before, .navigation__icon::after{
    width: 3rem;
    height: 2px;
    background-color: black;
    display: inline-block;
	
}

.navigation__icon::before, .navigation__icon::after{
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s;
}

.navigation__icon::before{
    top: -.8rem;
}

.navigation__icon::after{
    top: .8rem;
}

.navigation__button:hover .navigation__icon::before{
    top: -1rem;
}

.navigation__button:hover .navigation__icon::after{
    top: 1rem;
}


.navigation__checkbox:checked + .navigation__button .navigation__icon{
    background-color: transparent;
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::before{
    top: 0;
    transform: rotate(135deg);
}

.navigation__checkbox:checked + .navigation__button .navigation__icon::after{
    top: 0;
    transform: rotate(-135deg);
}


/*Navigation Background*/

.navigation__background{
    height: 3rem;
    width: 3rem;
    position: fixed;
    top: 7rem;
    right: 7rem;
    opacity: 1;
    background-image: radial-gradient(rgba(12, 158, 165), rgba(41, 41, 40));
    z-index: 80;
    transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
				border-radius: 50%;
}

.navigation__nav{
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    opacity: 0;
    width: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    list-style: none;
}

.navigation__item{
    margin: 1rem;
}

.navigation__link:link, .navigation__link:visited{
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
    background-size: 250%;
    transition: all .4s;
}

.navigation__link:hover, .navigation__link:active{
    background-position: 100%;
    color: #000;
    transform: translateX(1rem);
}

.navigation__checkbox:checked ~ .navigation__background{
    transform: scale(100);
	border-radius: 50%;
}

.navigation__checkbox:checked ~ .navigation__nav{
    opacity: 1;
    width: 100%;
	border-radius: 50%;
}
2

You are opening the menu using the css checkbox hack so the only way to close that menu is to click the menu icon again in order to turn off the checked state.

If you are clicking an in-page link then the menu will stay open because you haven’t changed the check box state. Usually you would use js to toggle the menu on and off and then you could tie that into the links so that they toggle the menu off when a link is clicked.

You could do the same for the checkbox hack and add an event listener to the links so that when they are clicked they register a click on the menu to change the checkbox state.

Something like this should work but may need adjusting depending on your needs.


// Get all links in the list
const links = document.querySelectorAll(".navigation__list li a");

// Attach click event to each link
links.forEach((link) => {
  link.addEventListener("click", function (event) {
    const checkbox = document.getElementById("navi-toggle");
    // Trigger a click on the checkbox to toggle content
    checkbox.click();
  });
});

A rough demo for proof of concept:

2 Likes
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.