Como criar um menu lateral

Como criar um menu lateral com html e css

Neste tutorial veja como podemos criar um menu lateral fixo com html, css e jquery.

Nesta seção, projetaremos uma estrutura simples na tag  <nav>,  <ul>,  <li>, <span> e a <href>para inserir o link de destino. 

Essas é a tags e classes que usaremos para criar o nosso menu.

Vamos Adicionar o HTML

      <nav>

          <ul>

               <li><div class="btn-social" id="btnToggle"><span class="icon icon-sharethis"></span></div>

                  <ul class="menu-social">
                  
                     <li><a href="#"><span class="icon icon-facebook"></span></a></li>
                     <li><a href="#"><span class="icon icon-twitter"></span></a></li>
                     <li><a href="#"><span class="icon icon-instagram"></span></a></li>
                     <li><a href="#"><span class="icon icon-pinterest"></span></a></li>
                  
                  </ul>

               </li>

          </ul>

      </nav>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o  nosso menu lateral com html, css e jquery.

nav a {
  text-decoration: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


nav {

  width: 50px;
  position: fixed;
  bottom: 25px;
  right: 25px;

}

nav ul {
    background-color: #0087ff;
    border-radius: 30px;
    display: inline-table;
    position: relative;
}

nav li {
    float: left;
}

nav a {
    
    color: #ffffff;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
    text-align: center;

}

nav .btn-social {
    
    color: #ffffff;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;

}

nav .btn-social.ativo { background:#4a4a4a; }


nav a:hover{
    color: #fff;
}

nav ul li ul {

    background: #0087ff;
    margin-top: -275px;
    padding: 3px;
    position: absolute;

}

nav ul li ul:before {

    background: #0087ff;
    content: "";
    height: 10px;
    left: 50%;
    margin: -5px 0 0 -5px;
    position: absolute;
    bottom: -4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 10px;
    z-index: -1;

}

nav ul li ul.menu-social { display:none; } 

nav ul li ul li {
    float: none;
}

nav ul li ul li a {
    color: #fff;
}

nav ul li ul li a:hover {
    background-color: #4a4a4a;
}

Vamos Adicionar o script

este script vai controlar o menu com efeito de fadein fadeout

<script src="js/jquery.js"></script>
<script>
    
    $(document).ready(function(){
        
        $('#btnToggle').click(function () {
        
            if (!$(this).hasClass('ativo')) {
                $(this).addClass('ativo');
                $('.menu-social').fadeIn(300);
            } else {
                $(this).removeClass('ativo');
                $('.menu-social').fadeOut(300);
            }
        });
    });

</script>

Combinando as Três seções acima Html ,Css e jquery temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando