Menu Responsivo

Menu Responsivo

Com o número cada vez maior de usuários Online que utilizam dispositivos móveis para navegar na internet, o recurso do Design responsivo é fundamental para garantir a boa experiência do usuário, que deve ser capaz de acessar adequadamente o conteúdo da página, independentemente das dimensões do seu dispositivo.

Design responsivo ainda é um assunto delicado para muitas pessoas, principalmente se tratando de menus.

Na realidade criar um menu responsivo é muito mais simples do que você pode imaginar!

Nesta aula você aprenderá como criar um menu responsivo usando algumas linhas de códigos com CSS e JQUERY.

Segui o Html

<div class="menu-responsivo">

<span class="btn-mobile" href="#" title="Menu"><i class="icon icon-menu"></i> Menu</span>

  <div class="controla-menu">
   <ul>
      <li><a href="#" title="Home">Home</a></li>
      <li><a href="#" title="Html">Html</a></li>
      <li><a href="#" title="Css">Css</a></li>
      <li><a href="#" title="Jquery">jquery</a></li>
      <li><a href="#" title="Wordpress">WordPress</a></li>
   </ul>
                      
  </div>

</div><!--Menu Responsivo-->

Segui o Css para Estilizar o menu

.menu-responsivo .controla-menu { 
  width:100%; 
  float:left; 
  display:none; 
  padding: 0px;
}

.menu-responsivo{ 
  background-color:#575656; 
  width:100%; 
  float:left; 
  border-radius:3px; 
  overflow:hidden; 
}

.menu-responsivo .btn-mobile{ 
  width:100%;
  display:block;
  border-bottom:0;
  text-align:right;
  padding:10px; 
  line-height:35px;
  cursor:pointer; 
  color:#fff;
}

.menu-responsivo .btn-mobile i { 

  font-size:1.6em; 
  display:block;
  float:right; 
  width:35px; 
  height:35px; 
  background:transparent; 
  text-align:center; 
  line-height:40px; 
  margin-left:10px; 
  border-radius:50px;

}

.menu-responsivo ul { margin: 0 auto; list-style: none; }
.menu-responsivo li { width:100%;float:left;}

.menu-responsivo a { 
  
  width:100%; 
  float:left;
  padding:15px;
  color:#fff; 
  font-size:1em; 
  text-decoration:none;
  background:#575656;
  border-bottom:1px #646363 solid;
  margin-bottom:1px; 
}
.menu-responsivo a:hover { background:#2fcacf; }

.menu-responsivo .menu-ativo { 
  background-color:#2fcacf!important;
}

/*Entra no Responsivo*/
/*1280PX BREAKPOINT*/
@media (min-width:80em){

 .menu-responsivo .controla-menu { display:block; }
 .menu-responsivo .btn-mobile    { display:none; }
 .menu-responsivo li             { width:auto; }
 .menu-responsivo a              { border-bottom:0; }

}

Agora para finalizar vamos Adicionar o script para o MOBILE

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>

     $('.btn-mobile').click(function () {
 
        if (!$(this).hasClass('menu-ativo')) {
             $(this).addClass('menu-ativo');
             $('.controla-menu').slideDown(500);
        } else {
            $(this).removeClass('menu-ativo');
            $('.controla-menu').slideUp(400);
        }
    });

</script>

Baixar Código Veja Funcionando