• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Dropdown menu sluit niet

Status
Niet open voor verdere reacties.
E

Erick

Gewaardeerd
Lid geworden
17 mei 2007
Berichten
1.359
Waarderingsscore
3
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?
 
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>
 
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?
 
Erick zei:
Kan ik van .link zomaar li.menu-item maken?
Klik om te vergroten...

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.
 
Tenx! Het menu werkt nu helemaal naar wens!
 
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:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan