HTML5 Demostración y Ejemplos JQuery biblioteca de JavaScript

Menú de navegación adaptable a dispositivos móviles

Nestor Tapia 12 octubre, 2017Last Updated: 24 diciembre, 2017

1 2.163 1 minuto de lectura

Menú de navegación adaptable a dispositivos móviles. Si navegamos en un smartphone nos encontraremos con un menú el cual presionas un botón con 3 líneas blancas aparece un espectacular menú por los laterales izquierda o derecha, sin embargo, en este tutorial les enseñare como hacer ese menú de navegación muy apreciado hoy en día en las páginas web.

Este menú es sensible al evento clic y están diseñados para funcionar con navegadores de escritorio, móviles y dispositivos táctiles. Hemos probado rigurosamente para que funcionen en los principales navegadores más recientes. Si tiene problemas para conseguir que el menú de su sitio web funcione, consúltenos en los comentarios.

Estos menús son muy utilizados en la mayoría de las paginas responsive. Sin embargo, tenemos que adaptarnos al cambio de tecnologías más recientes.

Para lograr nuestro objetivo utilizaremos en lenguaje JavaScript, HTML y CSS, no te preocupes sino sabes el lenguaje JavaScript, lo dejaremos para que lo descargues el final de este artículo.

Si estas utilizando Mozilla Firefox puedes utilizar las combinaciones de tecla Ctrl + Shift + M, con esto lograras ver los modos de visualización en diferentes resoluciones de pantallas.

Tabla de contenidos

Menú de navegación adaptable a dispositivos móviles

Paso #01 Declarar los estilos CSS y el Viewport.

<head>
	<meta charset="UTF-8">
	<title>Menu Lateral Responsive - Dispositivos Moviles</title>
	<link rel="stylesheet" href="style/estilos.css">
	<link rel="stylesheet" href="style/fonts.css">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>

Lo más importante es declarar el Meta Viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Paso #02 Declarar el Menú y la lista de navegación.

	<header>
		<div class="menu_bar">
			<a class="bt-menu" href="#"><span class="icon-list2"></span>Menu</a>
		</div>

		<nav>
			<ul>
				<li><a href="#"><span class="icon-house"></span>Inicio</a></li>
				<li><a href="#"><span class="icon-suitcase"></span>Nosotros</a></li>
				<li><a href="#"><span class="icon-rocket"></span>Servicios</a></li>
				<li><a href="#"><span class="icon-earth"></span>Galeria</a></li>
				<li><a href="#"><span class="icon-mail"></span>Contacto</a></li>
			</ul>
		</nav>
	</header>

Espero que esta breve explicacion les sirva en abundancia, cualquier duda lo mencionan en los comentarios.