Open and close menu

Question

Open and close menu

Navigation

#1 by (0 votes)

0

I have the following menu, which works when the screen is width: 768px or smaller. When I click on fa-bars , it disappears and shows fa-times . Opening the menu. So far so good. I want when I click on fa-bars it will hide the menu again and show fa-bars .

$('header nav div.menuMobile').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').show(300);
  $('.fa-bars').hide(300);
  $('.fa-times').show(300);
});

$('.fa-times').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').show(300);
  $('.fa-times').hide(300);
  $('.fa-bars').show(300);
});

header nav ul,
header nav a img {
  display: none
}

.menuMobile {
  display: block
}

.menuMobileClose {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><nav><divclass="menuMobile">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <i style="display:none" class="fa fa-times" aria-hidden="true"></i>
      <img src="assets/images/layout/logo.png">
      <ul>
        <li>
          <a href="link">Home</a>
        </li>
        <li>
          <a href="link">Quem Somos</a>
        </li>
        <li>
          <a href="link">Contato</a>
        </li>
        <li>
          <a href="link">E-commerce</a>
          <div class="submenu">
            <ul>
              <li>
                <a href="">Plataformas E-commerce</a>
              </li>
              <li>
                <a href="">Lojas virtuais customizadas</a>
              </li>
              <li>
                <a href="">Solução virtual para venda</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>

jquery css

asked by anonymous 14.07.2017 / 20:06

1 answer

Is there a tool for doing black box testing in C #? Use PHP variable in Ajax

score 0 · Accepted Answer

I made this example with some basic changes. Give more focus on my JS changes because of the rest I had to change your code to work here on the site. I also removed the logo because it was a broken image that was on top of the menu.

$('.fa-bars').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').show(300);
  $('.fa-bars').hide(300);
  $('.fa-times').show(300);
});

$('.fa-times').click(function(event) {
  event.preventDefault();
  $('header nav div.menuMobile ul').hide(300);
  $('.fa-times').hide(300);
  $('.fa-bars').show(300);
});

header nav ul,
header nav a img {
  display: none
}

.menuMobile {
  display: block
}

.menuMobileClose {
  display: block
}

div.fa-times {
  width: 10px;
  height: 10px;
  background: black;
  cursor: pointer;
}

div.fa-bars {
  width: 10px;
  height: 10px;
  background: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><nav><divclass="menuMobile">
      <div class="fa fa-bars" aria-hidden="true"></div>
      <div style="display:none" class="fa fa-times" aria-hidden="true"></div>
      <ul>
        <li>
          <a href="link">Home</a>
        </li>
        <li>
          <a href="link">Quem Somos</a>
        </li>
        <li>
          <a href="link">Contato</a>
        </li>
        <li>
          <a href="link">E-commerce</a>
          <div class="submenu">
            <ul>
              <li>
                <a href="">Plataformas E-commerce</a>
              </li>
              <li>
                <a href="">Lojas virtuais customizadas</a>
              </li>
              <li>
                <a href="">Solução virtual para venda</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</header>