E - Menu mobile

ejercicio Este ejercicio consiste en crear un menu básico, triple-raya, para dispositivos móviles. El código JavaScript se utiliza para cambiar la clase y mostrar el menú responsive.

También se sutiliza un velo que cubre toda la página y una clase para mover el body, de esta forma se indica al usuario que está dentro del menú móvil. Para salir del menú móvil simplemente se pulsa sobre cualquier sitio de la página velada.

Código JavaScript


// ========================================
//  Código JavaScript
//  MENU MOBILE
//  (cc) 2017, 3con14.pro
// ========================================

var rayas = document.getElementById('rayas');
var velo  = document.getElementById('velo');

velo.addEventListener('click',function(){
  var menuMobile = document.getElementById('menu-mobile');
  document.body.classList.toggle('mover');
  menuMobile.classList.toggle('show');
  velo.classList.toggle('on');
});
rayas.addEventListener('click',function(){
  var velo       = document.getElementById('velo');
  var menuMobile = document.getElementById('menu-mobile');
  document.body.classList.toggle('mover');
  menuMobile.classList.toggle('show');
  velo.classList.toggle('on');
});

Código HTML



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Menu mobile</title>
    <link rel="stylesheet" href="/css/menu.css">
</head>
<body>

<!-- Para dispositivos móviles -->
    <div id="rayas">&equiv;</div>
    <div id="velo"></div>
    <div id="menu-mobile">
        <div class="item"><a href="#" class="activo">ítem 01</a></div>
        <div class="item"><a href="#">ítem 02</a></div>
        <div class="item"><a href="#">ítem 03</a></div>
        <div class="item"><a href="#">ítem 04</a></div>
    </div>
<!-- fin dispositivos móviles -->

<h1>Cabecera</h1>
<div id="contenido">
    <h3>Contenido</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, libero dolorem. Repellat hic omnis recusandae autem placeat adipisci nihil ea ipsum maxime aperiam ipsam a corporis minima dolorum et tempora blanditiis obcaecati, consequatur natus ab libero! Numquam deserunt sed animi. Nostrum blanditiis porro neque voluptate laudantium incidunt nesciunt beatae praesentium atque aliquid perspiciatis minima est consequatur ad placeat, numquam voluptas excepturi laborum, voluptatibus odit dolores dicta ducimus explicabo tempora. Laboriosam doloremque, dolor reiciendis quis. Hic modi animi molestias tempora veritatis, quibusdam placeat deserunt asperiores at consectetur accusamus perferendis nihil minus. Minima eos possimus aliquid sapiente autem vel placeat doloribus ea?</p>
    <p>Dolor explicabo rerum magnam, nam, nobis unde ex maxime et? Doloremque sint culpa quia, corporis repellendus, eveniet a ratione illo optio error iure officiis tempore, delectus aut, libero quisquam ipsa eligendi. Aut nisi laboriosam enim fuga consequatur incidunt saepe adipisci itaque nobis quo placeat animi maiores fugit vitae hic voluptate distinctio dolorem voluptatibus dolores ad officia, error porro ipsum delectus accusamus. Quaerat debitis recusandae vero natus modi labore numquam porro, quo nesciunt? Molestiae ullam ipsam error! Reiciendis, natus, saepe cum consequatur laudantium repellendus facilis quasi suscipit a rerum quas molestiae ab ipsum deserunt, vel fugiat voluptas! Adipisci eveniet, culpa qui!</p>
</div>

<script src="/js/codigo.js"></script>
</body>
</html>

Reglas CSS



/*  ========================================
//  CSS para ejemplos JavaScript
//  MENU MOBILE
//  (cc) 2017, 3con14.pro
============================================ */

* { 
  box-sizing : border-box;
  transition : all 0.3s ease-in-out;
}
body {
  max-width        : 100vw;
  min-height       : 100vh;
  background-color : #FDF5E6;
}
/* MENU MOBILE 
==============================================*/
#rayas {
  z-index          : 3000;
  position         : fixed;
  top              : 25px;
  right            : 25px;
  padding          : 0;margin: 0;
  font             : 100 3em/1 monospace;
  border           : 0 none transparent;
  cursor           : pointer;
  color            : #333;
  background-color : transparent;
}
#rayas:hover, #rayas:active { color: #f00; }
#rayas { display: block; }

.mover { margin-left: 200px; }
#velo {
  z-index          : 1000;
  position         : fixed;
  top              : 0;
  left             : 0;
  bottom           : 0;
  right            : 0;
  cursor           : pointer;
  visibility       : hidden;
  background-color : rgba(0, 0, 0, 0.5);
}
#velo.on  { visibility: visible; }

#menu-mobile {
  z-index          : 2000;
  position         : fixed;
  top              : 0;
  left             : 0;
  bottom           : 0;
  right            : 0;
  overflow-y       : auto;
  max-width        : 100%;
  width            : 175px;
  transform        : translateX(-100%);
  background-color : #333;
  outline: 1px solid #333;
}
#menu-mobile.show { transform: translateX(0%); }
#menu-mobile .item a {
  display         : block;
  text-decoration : none;
  padding         : 0.5em 0 0.5em 1em;
  color           : #fff;
  border-bottom   : 1px solid #000;
}
#menu-mobile .item a:hover, #menu-mobile .item a:active {
  color            : #333;
  background-color : #fff;
}
#menu-mobile .item:first-child { margin-top: 2vh; }

.activo {
  color: #000;
  background-color: rgba(255, 255, 255, 0.4);  
}
#contenido {
  text-align: justify;
  padding: 1em;
}

Demo

menu mobile

Visitas...

Hoy ........ 0

Ayer ....... 0

Mes ........ 72

Total ........ 5726

En línea...

Hay 11 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS