Закрытие меню гамбургера из CSS - PullRequest
Новая
       17

Закрытие меню гамбургера из CSS

0 голосов
/ 01 ноября 2018

У меня есть меню для гамбургеров, построенное на CSS, но мне нужно закрыть его, когда вы нажимаете на ссылку. Это только 1-страничный сайт с якорными ссылками. Я пытался решить проблему с другими людьми, но не могу заставить ее работать.

Навигационные ссылки 

<nav>
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle">

  <ul>
      <li><a href="/#services">Services</a></li>
      <li><a href="/#about">About us</a></li>
      <li><a href="/#portfolio">Portfolio</a></li>
      <li><a href="/#reasons-to-choose-us">Reasons to choose us</a</li>
      <li><a href="/#contact">Contact us</a></li>
  </ul>
</nav>

Рабочий стол CSS 

nav {
    float: right;
    margin: 38px 0 34px 10px;
}

nav ul li {
    display: inline;
}

nav ul {
    clear: right;
}

nav li a {
    padding: 28px 35px;
}

nav li a:focus {
    text-decoration: none;
}

label {
    margin: 0 30px 0 0;
    font-size:46px;
    line-height: 70px;
    float: right;
    display: none;
}

#toggle {
    display: none;
}

CSS Mobile 

label {
    display: block;
    cursor: pointer;
    padding-top: 7px;
 }

 nav li a {
    padding: 15px;
    display: block;
    text-align: center;
    border-bottom: 1px solid #eee;
 }

 nav {
    float: none;
    margin: 0;
 }

 nav ul li {
    display: none;
 }

 nav ul li:hover {
    background: #eee;
 }

 nav ul li a:focus {
    background: #eee;
 }

 #toggle:checked + ul li {
    display: block;
    cursor: pointer;
  }

Имея ограниченный опыт кодирования, я немного борюсь с этим.

Спасибо

1 Ответ

0 голосов
/ 01 ноября 2018

ответьте на этот вопрос с помощью jquery:

jsfiddle.net / a9013pLr 

$(document).ready(function() {
  $('#toggle').click(function() {
    $('#ulul').toggleClass('open');
  });
});
@media only screen and (max-width:1000px) {
  label {
    display: block;
    cursor: pointer;
    padding-top: 7px;
  }
  nav li a {
    padding: 15px;
    display: block;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  nav {
    float: none;
    margin: 0;
  }
  nav ul li {
    display: none;
  }
  nav ul li:hover {
    background: #eee;
  }
  nav ul li a:focus {
    background: #eee;
  }
  #toggle {
    display: block!important;
    cursor: pointer;
  }
}

.open {
  display: none!important;
}

nav {
  float: right;
  margin: 38px 0 34px 10px;
}

nav ul li {
  display: inline;
}

nav ul {
  clear: right;
}

nav li a {
  padding: 28px 35px;
}

nav li a:focus {
  text-decoration: none;
}

label {
  margin: 0 30px 0 0;
  font-size: 46px;
  line-height: 70px;
  float: right;
  display: none;
}

#toggle {
  display: none;
}

button {
  width: 30px;
  height: 30px;
  background: green;
}

#ulul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <label for="toggle">&#9776;</label>
  <button id="toggle"></button>

  <ul class="open" id="ulul">
    <li><a href="/#services">Services</a></li>
    <li><a href="/#about">About us</a></li>
    <li><a href="/#portfolio">Portfolio</a></li>
    <li><a href="/#reasons-to-choose-us">Reasons to choose us</a></li>
      <li><a href="/#contact">Contact us</a></li>
  </ul>
</nav>

Оформить заказ Эта ссылка для лучшего решения с объяснением: https://www.w3schools.com/howto/howto_js_sidenav.asp

...