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:

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