Menu Slide Left

Menu Slide Left

Neste tutorial vamos fazer um Menu Slide lefet Animado com html css e Javascript.

Vamos Adicionar o Html:

<nav id="menu-slide">

	<ul>
		<li><i class="icon icon-home"></i> Home</li>
		<li><i class="icon icon-vcard"></i> Sobre</li>
		<li><i class="icon icon-camera-1"></i> Galeria de Fotos</li>
		<li><i class="icon icon-cube"></i> Blog</li>
		<li><i class="icon icon-mail"></i> Contato</li>
	</ul>

</nav>


<div id="content">
	
  <div class="mobile"> <i class="icon icon-menu"></i> </div>
	<h1 class="title">Loop Nerd</h1>
	<p>Menus Html Prontos</p>

</div>

Vamos Adicionar o Css:

.title {

    color: #3BBAD7;
    padding-bottom: 20px;
    border-bottom: 1px #f2ebeb solid;
    float: left;
    width: 100%;
}

nav#menu-slide {

  background: rgb(0,65,138);
  background: linear-gradient(180deg, rgba(0,65,138,1) 46%, rgba(0,140,207,1) 100%);
  position: fixed;
  top: 0;
  left: -100px;
  bottom: 0;
  display: block;
  float: left;
  width: 100%;
  max-width: 260px;
  height: 100%;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;

}

nav#menu-slide > ul {

  display:block;
  margin:30px;
  padding:0;
  list-style:none;
  opacity:0.3;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;

}

nav#menu-slide > ul li {

  color: #f7f7f7;
  padding: 5px 0;
  cursor: pointer;
  transition:0.3s;

}

nav#menu-slide > ul li:hover {
  color: #3BBAD7;
}

nav#menu-slide > ul li {
  
  margin-top: 7px;
  padding-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

nav#menu-slide > ul li:last-child { border-bottom:0; }

body.menu-ativo nav#menu-slide {
  left: 0px;
}

body.menu-ativo nav#menu-slide ul {
  left: 0px;
  opacity: 1;
}

/*
  Content
*/
div#content {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 70px;
  background: #fcfeff;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow: -3px 0 6px #4a5562;
  -webkit-box-shadow: -3px 0 6px #4a5562;
  box-shadow: -3px 0 6px #4a5562;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;

}

div#content div.mobile {

  position: fixed;
  top: 10px;
  left: 15px;
  width: 40px;
  height: 35px;
  background: #3BBAD7;
  color: #ffffff;
  cursor: pointer;
  border-radius: 6px;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  text-align: center;
  line-height: 40px;
  font-size: 1em;

}

div#content div.mobile:before {

  display: inline-block;
  width: 36px;
  height: 36px;
  color: black;
  font-style: normal;
  font-size: 1.2em;
  font-weight: normal;
  font-variant: normal;
  text-align: center;
  text-transform: none;
  line-height: 36px;
}

div#content div.mobile:hover { background-color: #556270; }


body.menu-ativo div#content {
  
  left:260px;

}

body.menu-ativo div#content .mobile {

  left:270px;

}

Script do do controle de slide:

<script>
(function() {
	var $body = document.body
	, $mobile = $body.getElementsByClassName('mobile')[0];

	if ( typeof $mobile !== 'undefined' ) {
		$mobile.addEventListener('click', function() {
			$body.className = ( $body.className == 'menu-ativo' )? '' : 'menu-ativo';
		});
	}

}).call(this);
</script>

Veja o Resultado!

Baixar Código Veja Funcionando