Responsive Menu

Question

Responsive Menu

Navigation

#1 by (0 votes)

2

Talk, how can I hide my menu when it comes to resolution 990? the menu adds the toggle button appears but when I click on it the menu does not appear.

.header_topo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 121px;
  background: red; }

.logo {
  padding: 0px 0px 0px 10px;
  margin: 10px 10px 10px 100px;
  line-height: 100px; }

.layout_center {
  width: 100%; }

.wrap_menu {
  float: right;
  margin-right: 108px; }

.wrap_menu ul {
  margin: 0;
  listy-style: none; }

.wrap_menu li a {
  font-size: 1.3em;
  text-decoration: none;
  color: #fff; }

.btn-toggle {
  display: none; }

#navbar ul li {
  list-style: none;
  display: inline-block; }

@media (max-width: 990px) {
  #navbar {
    display: none; }

  .btn-toggle {
    display: block; } }

<div class="layout_center">
  <div id="navbar" class="wrap_menu">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Nossa empresa</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </div>
  <a href="#" class="btn-toggle">Toggle</a>
</div>

html css

asked by anonymous 02.09.2017 / 19:50

1 answer

PHP: Interface type attribute How to implement a validation rule in Laravel?

score 0 · Accepted Answer

Using JavaScript

To make it appear with click, you can with javascript, here is an example:

function showMenu() {
  var $navbar = document.getElementById('navbar');
  var style = window.getComputedStyle($navbar);
  
  if(style.display == 'none') {
    $navbar.style.display = 'block';
  } else {
    $navbar.style.display = 'none';
  }
}

.header_topo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 121px;
  background: red; }

.logo {
  padding: 0px 0px 0px 10px;
  margin: 10px 10px 10px 100px;
  line-height: 100px; }

.layout_center {
  width: 100%; }

.wrap_menu {
  float: right;
  margin-right: 108px; }

.wrap_menu ul {
  margin: 0;
  listy-style: none; }

.wrap_menu li a {
  font-size: 1.3em;
  text-decoration: none;
  color: #000; }

.btn-toggle {
  display: none; }

#navbar ul li {
  list-style: none;
  display: inline-block; }

@media (max-width: 990px) {
  #navbar {
    display: none; }

  .btn-toggle {
    display: block; } }

<div class="layout_center">
  <div id="navbar" class="wrap_menu">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Nossa empresa</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </div>
  <a href="#" class="btn-toggle" onclick="showMenu()">Toggle</a>
</div>

Using CSS

An alternative with css would be using :focus , but for that the html would have to have a small change, which is to put the "toggle" button before the menu. But this solution would not exactly create the toggle effect, but when you click the button it opens the menu and when you click outside the button it closes the menu:

.header_topo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 121px;
  background: red; }

.logo {
  padding: 0px 0px 0px 10px;
  margin: 10px 10px 10px 100px;
  line-height: 100px; }

.layout_center {
  width: 100%; }

.wrap_menu {
  float: right;
  margin-right: 108px; }

.wrap_menu ul {
  margin: 0;
  listy-style: none; }

.wrap_menu li a {
  font-size: 1.3em;
  text-decoration: none;
  color: #000; }

.btn-toggle {
  display: none; }

#navbar ul li {
  list-style: none;
  display: inline-block; }

@media (max-width: 990px) {
  #navbar {
    display: none; }

  .btn-toggle {
    display: block; }
    
  .btn-toggle:focus + #navbar {
    display: block;
  }
}

<div class="layout_center">
  <a href="#" class="btn-toggle">Toggle</a>
  <div id="navbar" class="wrap_menu">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Nossa empresa</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </div>
</div>