Categoría: JAVASCRIPT

Slide menu que está genial para tus páginas web. Sobre todo aquellas que deseas se vean bien en dipositivos móviles. Es simple pero efectivo. Totalmente modificable y limpio en su código

Pure Javascript Sliding Menu para tu página web

Código en HTML5:


 <header class="header">
  <button class="open-menu">
    Open
  </button>
  
  Logo
  
  <nav class="header--nav">
    <button class="close-menu">
      Close
    </button>
    
    <!-- Links -->
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Contact</a>    
  </nav>
</header> 		

Código del Css3:


.header {
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  padding: 1em;
}
.header--nav {
  background: #fff;
  padding: 1em;
  margin: 0;
  text-align: center;
  overflow: auto;
  height: 100%;
  width: 80%;
  max-width: 320px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: -100%;
  -webkit-transition: left .5s ease-out;
  transition: left .5s ease-out;
}
.header--nav a {
  display: block;
}

.active .header--nav {
  left: 0;
}

.active:after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
}

.open-menu {
  margin-right: 1em;
}

.close-menu {
  margin-bottom: 1em;
}

Código del JavaScript:


var html = document.documentElement; 

document.querySelector('.open-menu').onclick = function(){
  html.classList.add('active');
};

document.querySelector('.close-menu').onclick = function(){
  html.classList.remove('active'); 
};

html.onclick = function(event){
  if (event.target === html){
    html.classList.remove('active');
  }
};

Utilizamos cookies para aportar una mejor experiencia al usuario en nuestro sitio web. Si sigues navegando, entendemos que aceptas su uso Más información