Hide mobile menu after clicking

Question

Hide mobile menu after clicking

Navigation

#1 by (1 votes)

1

I'm having trouble hiding the menu in responsive mobile mode. There is something wrong, when I click on the link the menu disappears, but when I click to open again it is giving a bug, opens and closes quickly. What can it be?

$('.navBar li a').click(function() {
    $('nav #menu-toggle:checked ~ ul').slideUp('fast');
});

$('nav .label-toggle').click(function() {
    $('nav #menu-toggle:checked ~ ul').slideToggle('fast');
});

Project link: link

javascript jquery css3

asked by anonymous 02.07.2018 / 14:13

1 answer

How do I send multiple values to a single Activity Use ILogger with .Net Core 2

score 1 · Accepted Answer

EDIT

After your comments, your problem became clearer. Actually that makes the menu expand and collapse is that CSS rule nav #menu-toggle:checked ~ ul so what you need is to make sure that the menu link is clicked the menu collapses by changing the cheked state of the input.

For this you need to make a .trigger('click') in your input:checkbox , you do not have to use the methods slideToggle etc, since it will make this effect is the sue% CSS_with%, to understand better see the code below.

$('.navBar li a').click(function() {
    $('#menu-toggle').trigger('click'); 
});

.navBar {
	position: fixed;
  min-width: 100%;
  z-index: 3;
  background:#000F23;
}

.logo {
  display: inline-block;
  height: 42px;
  margin: 45px 20px ;
  width: 187px;
}

.wrapper {
  margin: 0 auto;
  max-width: 100%;
  padding: 0 2%;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  min-width: 40%;
}
nav ul a {
  color: #FFF;
  text-decoration: none;
  transition: all 0.5s ease;
}
nav ul a:hover {
  color: #AAA;
}
nav li {
    display: inline-block;
    padding: 6px 17px;
    font-size: 20px;
    font-family: 'Brandon Grotesque';
    font-weight: normal;
  font-style: normal;
}

nav ul li:last-child a{
    padding: 6px 17px;
    border: 2px solid;  
    border-radius: 5px;
    color: #00E4D9;
}

#menu-icon { display: none; /* hide menu icon initially */}

nav ul li:last-child a:hover{
    color: #00ABAF;
}

nav #menu-toggle {
  display: none;
}
nav .label-toggle {
  display: none;
}
nav .wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  nav nav ul a {
    color: #FFF;
  }
  nav ul {
    background-color: #000F23;
    display: block;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: center;
    transition: all 1s ease;
    width: 100%;
    visibility: hidden;

  }
  nav li {
    color: #53354A;
    display: block;
    font-size: 1.5em;
    padding: 1em 0;
    text-align: center;
  }
  nav #menu-toggle:checked ~ ul {
    opacity: 1;
    height: 100vh;
    visibility: visible;
    background:#000F23; 
  }
  nav .label-toggle {
    background: linear-gradient(to bottom, #FFF 0%, #FFF 20%, transparent 20%, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%, transparent 80%, #FFF 80%, #FFF 100%);
    cursor: pointer;
    display: block;
    float: right;
    height: 35px;
    margin-top: 3em;
    margin-right: 2em;
    width: 35px;
  }
  nav .wrapper {
    display: block;
  }
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><navclass="navBar">
  <nav class="wrapper">
    <div class="logo">
      LOGO</div>
    <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
    <ul> 
      <li><a href="#sobre">Sobre</a></li>
      <li><a href="#funcionalidades">Funcionalidades</a></li>
      <li><a href="#planos">Planos</a></li>
      <li><a href="login.html">Login</a></li>
      <li><a href="cadastro.html">Inscrever-se</a></li>
    </ul>
  </nav>
</nav>

OBS: You should not use a #menu-toggle:checked inside the other, the correct one would be a <nav> or put the <header><nav></nav></header> class in the .wrapper outside thus avoiding using nav