Menu lateral css html

Menu lateral css html

Como criar Menu Lateral Apenas com HTML e CSS e JAVASCRIPT. Crie facilmente um menu sidebar deslizante para seu site.

Nesta seção, projetaremos uma estrutura básica no html. 

Usaremos A Tag <nav>, <div>, <span>, <i>, <ul>, <li> e a tag <a> para inserirmos o link de destino.

Essas são as tags que usaremos no html

Vamos Adicionar o Html

<nav id="app-menu">

    <div id="app-menu-lateral">
      
        <div id="app-config">
          
            <span class="title"><i class="icon icon-cube"></i> Menu</span>
            <ul>
                <li> <a href="#" title="Facebook"><i class="icon icon-facebook"></i> facebook</a> </li>
                <li> <a href="#" title="Twitter"><i class="icon icon-twitter"></i> Twitter</a> </li>
                <li> <a href="#" title="Instagram"><i class="icon icon-instagram"></i> Instagram</a> </li>
                <li> <a href="#" title="Pinterest"><i class="icon icon-pinterest"></i> Pinterest</a> </li>
            </ul>

        </div>
        <div id="app-seta"><i class="icon icon-angle-right"></i></div>
    
    </div>

</nav><!--app-menu-->

Vamos Adicionar o CSS

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

#app-menu{
  
  width:550px;
  position:fixed;
  top:150px;
  overflow:hidden;
  z-index:99999;

}

#app-menu-lateral{
  position:relative;
  width:150px;
  height:250px;
  background:rgb(0,0,0);  
  left:-150px;
  border-radius: 0px 20px 20px 0px;
  -webkit-transition: left .5s;
  -moz-transition: left .5s;
  -o-transition: left .5s;
  -ms-transition: left .5s;
}

#app-seta {

  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 25px;
  background: rgb(0,0,0);
  border-radius: 50%;
  left: 81%;
  top: 40%;
  cursor: pointer;
  color: rgb(120,120,120);
  text-align: center;
  padding-top: 13px;
  padding-left: 21px;
  font-family: "Arial";
  font-size: 28px;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  -o-transition: color .2s;
  -ms-transition: color .2s;

}

#app-seta:hover{
 
  color:#fff;

}

#app-config{
  
  display:inline-block;
  width:100%;
  height:100%;

}

#app-config .title {
 
    width: 100%;
    float: left;
    color: #00d7dc;
    font-size: 1.2em;
    margin-bottom: 10px;
    border-bottom: 1px #313131 solid;
    padding: 8px;

}

#app-config ul {

    width: 100%;
    float: left;

}

#app-config ul li {

	width: 100%;
	float: left;
	padding: 0px 5px;
	margin-bottom: 5px;

}

#app-config ul li a {

	width: 100%;
	float: left;
	display: block;
	text-decoration: none;
	color: #ffffff;
	font-size: 15px;
	margin-bottom: 2px;
	transition: 0.3s;

}

#app-config ul li a:hover {

	color: #00d7dc;
}

Por último vamos adicionar o script.

<script>
    
    var app=0;
    $("#app-seta").click(function(){
      
      if(app==0){
      
        $("#app-menu-lateral").css({"left":"0px"});
        app=1;
        $(this).html('<i class="icon icon-angle-left"></i>');
      
      }else{
      
        $("#app-menu-lateral").css({"left":"-150px"});
        app=0;
        $(this).html('<i class="icon icon-angle-right"></i>');
      
      }
      
    });

</script>

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando