Menu Accordion com jQuery

Menu Accordion com jQuery

Neste tutorial veremos como criar um Menu Accordion utilizando Html, css e jquery.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <ul>,<li>,<div>,<i>, e a tag <a> para inserirmos p link de destino.

Essas tags usaremos para criar o nosso Menu efeito sanfona com html, css e jquery.

Vamos Adicionar o HTML

    <ul class="accordion-menu">
      
        <li>
       
            <div class="dropdownlink"><i class="fa fa-cube" aria-hidden="true"></i> Css
              <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </div>
           
            <ul class="submenuItems">
              <li><a href="#">Menus</a></li>
              <li><a href="#">Formularios</a></li>
              <li><a href="#">TabNav</a></li>
              <li><a href="#">Loading</a></li>
              <li><a href="#">Botão</a></li>
              <li><a href="#">Profile Card</a></li>
            </ul>
      
        </li>
      
        <li>
        
            <div class="dropdownlink"><i class="fa fa-code" aria-hidden="true"></i> Html
              <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </div>
        
            <ul class="submenuItems">
              <li><a href="#">Article</a></li>
              <li><a href="#">Aside</a></li>
              <li><a href="#">Section</a></li>
              <li><a href="#">Main</a></li>
              <li><a href="#">Footer</a></li>

            </ul>
        
        </li>

        <li>
        
            <div class="dropdownlink"><i class="fa fa-dollar" aria-hidden="true"></i> jQuery
              <i class="fa fa-chevron-down" aria-hidden="true"></i>
            </div>
        
            <ul class="submenuItems">
              <li><a href="#">Slide</a></li>
              <li><a href="#">Carrossel</a></li>
              <li><a href="#">Accordion</a></li>
            </ul>
        
        </li>

    </ul>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Menu accordion com css e html.

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: transparent;
  border-radius: 4px;
}

.accordion-menu li.open .dropdownlink {
  
  color: #59D4D9;

}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
  transform: rotate(180deg);
}

.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}

.dropdownlink {

    cursor: pointer;
    display: block;
    padding: 15px 15px 15px 45px;
    font-size: 18px;
    border-bottom: 3px solid #f4f4f4;
    color: #ffffff;
    font-weight: bold;
    position: relative;
    transition: all 0.4s ease-out;
    border-radius: 6px;
    background: #4c4c4c;
    box-shadow: 1px 0px 1.2px 0px #e3e3e3;

}

.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}
.dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
}

.submenuItems {
  
  display: none;
  background: #59D4D9;
  border-radius: 6px;
  overflow: hidden;

}
.submenuItems li {

  border-bottom: 2px solid #F4F4F4;

}

.submenuItems a {

  display: block;
  color: #1e1e1e;
  font-weight: bold;
  padding: 12px 12px 12px 20px;
  transition: all 0.4s ease-out;

}

.submenuItems a:hover {

  background-color: #188488;
  color: #fff;

}

Também vamos usar Font Awesome

Font Awesome é um conjunto de ferramentas de fontes e ícones com base em CSS e LESS. Foi feito por Dave Gandy para uso com o Twitter Bootstrap e mais tarde foi incorporado no BootstrapCDN.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

Vamos Adicionar o Scrip para dar o efeito sanfona

OBS: crie uma pasta js/ para puxar o jquery.js

<script src="js/jquery.js"></script>
<script type="text/javascript">
    
    $(function() {
    
      var Accordion = function(el, multiple) {
        this.el = el || {};
        // more then one submenu open?
        this.multiple = multiple || false;
        
        var dropdownlink = this.el.find('.dropdownlink');
        dropdownlink.on('click',
                        { el: this.el, multiple: this.multiple },
                        this.dropdown);
      };
      
      Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el,
            $this = $(this),
            //this is the ul.submenuItems
            $next = $this.next();
        
        $next.slideToggle();
        $this.parent().toggleClass('open');
        
        if(!e.data.multiple) {
          //show only one menu at the same time
          $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
        }
      }
      
      var accordion = new Accordion($('.accordion-menu'), false);
    })

</script>

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando