Menu Toggle

Menu Toggle

Neste artigo veremos como criar um Menu com efeito Toggle.

Para isso precisamos do HTML, CSS e JQUERY.

Nesta seção, projetaremos uma estrutura simples na tag <nav>. temos dentro da tag <nav> a tag <i> para exibir o icone de mobile. também temos a tag <ul>, <li> e <href> para criar a estrutura do menu.

Veja o código html abaixo.

Vamos Adicionar o HTML

    <nav>    
                
        <i class="icon icon-menu" id="toggle"></i>  
        <ul id="menu">
               
           <li><a href="#" title="Home">Home</a></li>
           <li><a href="#" title="Html5">Html5</a></li>
           <li><a href="#" title="Css3">Css3</a></li>
               
        </ul>

    </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso menu.

#toggle {
    
    display: block;
    width: 35px;
    height: 35px;
    line-height: 38px;
    background: #4c4c4c;
    text-align: center;
    font-size: 1.2em;
    border-radius: 50px;
    color: #fff;

}

.ativo { color:#00CDD5!important; }

nav { 

    width: auto;
    float: right;
    padding: 5px;
    top: 15px;
    display: block;
    position: relative;
    margin-right: 41px;

}

#menu {
  
    position: absolute;
    color: #999;
    width: 220px;
    padding: 6px;
    margin: ;
    font-family:'open_sanslight';
    text-align: left;
    border-radius: 6px;
    background-color:#4c4c4c;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    display: none;
    top: 83px;
    right: -21px;

}

#menu:after {

    position: absolute;
    top: -10px;
    left: 160px;
    content: "";
    display: block;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #4c4c4c;

}

#menu ul, li, li a {

  list-style: none;
  display: block;
  margin: 0;
  padding: 0;

}

#menu li a {

  padding: 5px;
  color: #fff;
  border-radius:6px;
  text-decoration: none;
  transition: all .2s;

}

#menu li a:hover,
#menu li a:focus {

  background-color: #00CDD5;
  color:#fff;

}

E por último vamos adicionar o script para fazer o Efeito no menu

$(document).ready(function(){
    $('#toggle').click(function () {

        if (!$(this).hasClass('ativo')) {
            $(this).addClass('ativo');
            $('#menu').fadeIn(300);
        } else {
            $(this).removeClass('ativo');
            $('#menu').fadeOut(300);
        }
    });
});

Nesta seção, combinaremos as três seções acima para criar o nosso efeito no menu

Utilizando HTML , CSS e JQUERY.

Código completo veja o resultado !

Baixar Código Veja Funcionando