Portada » HTML5 Demostración y Ejemplos » Menú de navegación adaptable a dispositivos móviles

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

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.

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.

Las Referencias qie utilizaremos para este elegante Menú

Para los iconos Icomoon: http://icomoon.io/app

Libreria Jquery: http://code.jquery.com/jquery-latest.js

Vista de768 x 1024

Menu responsive 768x1024
Menu responsive 768×1024

Vista de 320 x 480

Menu responsive 320x480
Menu responsive 320×480
Menú de navegación adaptable a dispositivos móviles
Menú de navegación adaptable a dispositivos móviles

Descargas

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

1 comentario en “Menú de navegación adaptable a dispositivos móviles”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad