Probleem Dropdown menu sluit niet

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.306
Waarderingsscore
2
Punten
38
Voor een te maken website wilde ik dit fullscreen menu gebruiken. Ik krijg het menu goed geïntegreerd in de site, maar het menu sluit niet vanzelf wanneer er een keuze gemaakt wordt. Ik denk dat dit te maken heeft met de links. Ik link namelijk niet naar een nieuwe pagina, maar naar een id op de pagina zelf.

Iemand een idee hoe ik menu wel automatisch kan laten sluiten wanneer een menu-item gekozen wordt?
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
547
Waarderingsscore
22
Punten
18
Ik heb dit opgelost met een beetje jquery. Denk er aan een jquery library te linken. De click op de menutoggle (het menuikoontje) wordt bij het klikken op een hyperlink (met nieuw toegevoegde class 'link') gesimuleerd binnen $(document).ready van jquery, via

$(".link").click(function () {
$("#menuToggle").click();
});

Daardoor sluit het menu weer.

Hier volgt de html van de gehele pagina.

HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Pure CSS3 Menu FullScreen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
input {
  display: none;
}

.open {
  background-color: #3c3c3c;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 8px;
}

.open:before {
  content: "";
  background-color: #3c3c3c;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #3c3c3c;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menuOpen {
  width: 24px;
  height: 20px;
  display: block;
  padding: 15px;
  cursor: pointer;
  float: right;
}

.menuOpen:hover .open:before {
  top: -9px;
}

.menuOpen:hover .open:after {
  top: 5px;
}

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(255, 135, 2, 0.9);
}

.menu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.menu .menuContent {
  position: relative;
  top: 50%;
  font-size: 54px;
  text-align: center;
  padding-bottom: 20px;
  margin-top: -170px;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.menu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  font-family: Trebuchet MS;
  text-transform: uppercase;
  padding: 10px 0;
}

.menu ul li a:hover {
  color: #ff8702;
}

.menu ul li:hover {
  background: white;
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(0%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

#menuToggle:checked ~ .menuEffects ul {
  opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
  background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul {
  transform: translateY(-30%);
}

</style>
<script>
        $(document).ready(function () {
 
            $(".link").click(function () {
                $("#menuToggle").click();
            });
        });
</script>
</head>

<body>
<div id="menuArea">
      <input type="checkbox" id="menuToggle"></input>
    
    <label for="menuToggle" class="menuOpen">
      <div class="open"></div>
    </label>
    
    <div class="menu menuEffects">
      <label for="menuToggle"></label>
      <div class="menuContent">
        <ul>
          <li><a class='link' href="#">MENU 1</a></li>
          <li><a class='link' href="#">MENU 2</a></li>
          <li><a class='link' href="#">MENU 3</a></li>
          <li><a class='link' href="#">MENU 4</a></li>
        </ul>
      </div>
    </div>
</div>
</body>
</html>
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.306
Waarderingsscore
2
Punten
38
Cool! Als ik hier een WP-menu inbouw (dus de UL in het voorbeeld vervang voor het WP-menu dat aangeroepen wordt), kom ik niet weg met de .link die je als class hebt ingesteld in de js. De links hebben namelijk geen eigen class. Wel de li erom heen (.menu-item).

Kan ik van .link zomaar li.menu-item maken?
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
547
Waarderingsscore
22
Punten
18
Kan ik van .link zomaar li.menu-item maken?

Absoluut. Je klikt immers ook op het list-item li als je op de link klikt. Ik neem aan dat er zoiets staat als:

<li class='menu-item'><a>Linktekst</a></li>

Dan dien je het dus te schrijven als:

$(".menu-item").click(function () {
$("#menuToggle").click();
});

Ik heb iets dergelijks net getest en het werkt precies als in het eerste voorbeeld.
 

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.306
Waarderingsscore
2
Punten
38
Tenx! Het menu werkt nu helemaal naar wens!
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
547
Waarderingsscore
22
Punten
18
Fijn! Graag gedaan.
 

roon

Websites
Lid geworden
21 feb 2020
Berichten
18
Waarderingsscore
3
Punten
3
Locatie
regio Den Haag
In een menu item staat een paginalink en niet href="#" . Dit is de reden dat je op dezelfde pagina blijft en het menu niet sluit. Als je een pagina linkje invult, bijvoorbeeld href="pagina2.htmll" dan ga je naar die pagina toe en is het menu altijd gesloten.

Je hebt geen script nodig als de pagina linkjes zijn ingevuld. Voorbeeld:

Code:
<ul>
  <li><a class='link' href="pagina1.html">MENU 1</a></li>
  <li><a class='link' href="pagina2.html">MENU 2</a></li>
  <li><a class='link' href="pagina3.html">MENU 3</a></li>
  <li><a class='link' href="pagina4.html">MENU 4</a></li>
</ul>

Alleen op een One-Page website (website met maximaal 1 pagina) is het script nodig om naar verschillende secties op deze ene pagina te gaan.
 
Laatst bewerkt:

Nieuwste berichten

Bovenaan Onderaan