Cargando



Crear Menú Responsive con Plugin Responsive-Nav.js

Hay varias formas de crear menús de navegación con función responsive es decir, que responda con todos los dispositivos donde se pueda visualizar el sitio. Pero el problema es que muchas de esas formas no son totalmente compatibles con algunos navegadores si se usa CSS3 para hacer esta tarea.


feb 24 2014 21:02
Profesional
feb 25 2014 10:04

Responsive_Navigación.png


Hay varias formas de crear menús de navegación con función responsive es decir, que responda con todos los dispositivos donde se pueda visualizar el sitio web.

Pero el problema es que muchas de esas formas no son totalmente compatibles con algunos navegadores si se usa CSS3 para hacer esta tarea.
Gracias a Javascript podemos hacer que este tipo de efectos y animaciones sean mucho mas compatibles con los navegadores y así dar el soporte necesario a estos.

En este tutorial veremos como hacer una barra de navegación totalmente responsive utilizando el plugin de Javascript Responsive Nav.

Este plugin es de código abierto y lo podemos usar en cualquier proyecto, viene con su hoja de estilos para poder personalizarlo y es totalmente dependiente de otras librerías de Javascript como por ejemplo jQuery.


En el HTML solo necesitaremos crear una lista para emplear el menú y darle un identificador para poder seleccionarla por medio del script que es requerido por parte del plugin.
También vinculamos el plugin Responsive Nav y lo vinculamos al documento, este lo podemos descargar desde su pagina oficial o directamente en Github, podemos descargar el archivo .js solamente o si quieres puedes descargar todo el archivo .zip, para este tutorial utilizare solo el archivo responsive-nav.min.js.

Creamos una pagina web demo que denominamos responsive.html


<!doctype html>
<html lang="es">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigación</title>
<link rel="stylesheet" media="all" href="css/styles.css">
<script type="text/javascript" src="js/responsive-nav.min.js"></script>
</head>

<body>
<div id="contenido">
<div id="nav">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>

<h1>Tutorial, Navegación Responsive</h1>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>

<p>Sed egestas, ante et vulputate volutpat</p>

</div>
<script type="text/javascript">
var navigation = responsiveNav("#nav");
</script>
</body>
</html>


Luego añadiremos las css en un archivo estilos.css con el siguiente codigo

body {
margin: 0;
padding: 0;
background: #3d3d3d;
font-family: Arial, sans-serif;
}

img {
max-width: 100%;
}
#contenido{
background-color: #E6E6FA;
margin: 20px auto 0;
padding: 20px;
width: 80%;
}

#nav {
background-color: #4C76AE;
}
#nav ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
#nav ul li {
width: 100%;
display: block;
list-style: none;
}
#nav ul li a {
display: block;
padding: 10px 9px;
width: 100%;
font-size: 1.1em;
font-weight: normal;
background: #4c76ae;
color: #cad7ea;
text-decoration: none;
}
#nav ul li a:hover {
background: #00567f;
}

.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
#nav.opened {
max-height: 9999px;
}
#nav-toggle {
font-size: 1.2em;
font-weight: bold;
padding: 3px 9px;
margin-left: 15px;
text-decoration: none;
border-radius: 3px;
color: #fefefe;
background: #4c7ab6;
margin-bottom: 15px;
}

Hasta aquí sera la hoja de estilo general, ahora crearemos una hoja de estilo que adaptara el menu si la pantalla se achica a 640px o menos, para esto aplicamos unos estilos dentro de la propiedad Media Queries de css3 que se aplicaran en dispositivos con resolución mínima a 640px. Si la resolucioon es mayor se utilizara las css genral definidas.

@media screen and (min-width: 640px) {
.js #nav {
position: relative;
}
.js #nav.closed {
max-height: none;
}
#nav-toggle {
display: none;
}

#nav ul li a {
border-right: 1px solid #5E88BF;
display: block;
float: left;
width: auto;
background: none;
padding: 11px 15px;
font-weight: normal;
text-decoration: none;
color: #E6E6FA;
}

#nav ul li a:hover {
background: #00567f;
color: #cad7ea;
}

h1 {
color: #90b9a0;
font-size: 2.5em;
text-align: center;
}
}

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X