Como hacer un menú de navegación adaptable a dispositivos móviles (Responsive Design)

Transcripción

1 Como hacer un menú de navegación adaptable a dispositivos móviles (Responsive Design) Como utilizar iconos personalizados mediante fuentes Una de las tendencias actuales dentro del diseño web es el diseño plano o lo que se le conoce como flat design, el cual consiste en hacer sitios basados en paletas de colores flat e incluyendo iconos que mejoran la experiencia de usuario dentro de una web. Ventajas: - Podemos agregar tantos iconos como queramos - El rendimiento (tiempo de descarga), es mejor al no tener que descargar imágenes. - Al ser fuentes, puedes hacer cambios de tamaño (fotnt-size), de una forma rápida y fácil. - Al ser vectores, nunca se verá el pixelado por cambio de tamaño. Link a Icomoon: Esta plataforma nos permite seleccionar un conjunto de iconos, que nosotros queramos, y convertirlos a un archivo de fuente que luego descargamos e incorporamos a nuestro sitio web. Paso1 ir al sitio icomoon Paso 2 Pulsar en icomoon app 1

2 Paso 3 Nos presentan varios iconos preestablecidos, podemos borrarlos y agregar nuevos. Se pueden agregar desde una librería, la mayoría de iconos son gratuitos, pero hay algunos de pago. Una librería recomendada es la de Entypo. Paso 4 Selecciono los que quiero 2

3 Paso 5 PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB Exporto como Font Paso6 Vemos los iconos con los nombres y pulsamos a download para descargarlos. Nos descarga un archivo zip. Paso 7 Extraemos los archivos y nos quedamos con la carpeta fonts y el archivo style.css. Esos dos archivos son los archivos que nos quedaremos para incorporar a nuestra web. 3

4 Meta Viewport: PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB La etiqueta meta para el viewport fue introducida por Apple en Safari para móviles, para ayudar a los desarrolladores a mejorar la presentación de sus aplicaciones web en un iphone, ipod Touch o ipad. La etiqueta viewport nos permite a los que construimos sitios web o web apps, definir el ancho, alto y escala del área usada por el navegador para mostrar contenido. Al fijar el ancho o alto del viewport, los desarrolladores podemos usar un número fijo de pixeles (ej: 320, 480, etc) o usar dos constantes, device-width y device height respectivamente. Se considera una buena práctica configurar el viewport con algunas de estas dos constantes, en vez de un ancho o alto fijo. Utilizando las constantes, se verá de mejor forma no solo en el iphone sino que en muchos mobile browsers más. A continuación la configuración más común de una etiqueta meta, para introducir dentro del head de tu mobile web app: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> Para la realización de nuestro menú responsive, utilizamos las siguientes características de la meta viewport: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Estructura HTML del menú de navegación: <header> <!-- Este div contiene el botón del menú para dispositivos móviles--> <div class="menu_bar"> </div> <nav> <a href="#" class="bt-menu"><span class="icon-list2"></span>menu</a> <ul> <!-- Cada elemento li tiene una clase con el nombre del botón, los botones pueden obtenerse en: --> <li><a href="#"><span class="icon-house"></span>inicio</a></li> <li><a href="#"><span class="icon-suitcase"></span>trabajos</a></li> <li><a href="#"><span class="icon-rocket"></span>proyectos</a></li> 4

5 <li><a href="#"><span class="icon-earth"></span>servicios</a></li> <li><a href="#"><span class="icon-mail"></span>contactos</a></li> </ul> </nav> </header> Estilos CSS: /*reset*/ * { margin:0; padding:0; /*color de fondo body*/ body { background:#fffffa; /*ancho del header*/ header { width:100%; /*compuesto nav dentro del header*/ header nav { width:90%; max-width:1000px; /*ancho máximo de 1000px para que no sobrepase esta medida*/ margin:20px auto; /*márgenes top y bottom de 20 px, izquierdo y derecho auto*/ background:#024959; /*color de fondo azul menú*/ 5

6 .menu_bar { PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB display:none; /*hace desaparecer el menú*/ /* Es comúnmente usado para ocultar o mostrar elementos sin eliminarlos. Esto es diferente de visibility. Usar display: none no dejará espacio donde el elemento se encontraba, pero visibility: hidden; dejará un espacio vacío.*/ header nav ul { overflow:hidden; /* Cuando los contenidos de un elemento no caben en su interior, el navegador debe mostrarlos aunque se salgan del elemento y se solapen con los elementos adyacentes. overflow permite modificar este comportamiento por defecto. Con overflow: hidden, conseguimos que el navegador oculte todos los contenidos que se salen de la caja del elemento*/ list-style:none; /*para no mostrar ningún marcador o viñeta*/ header nav ul li {/*compuesto elemento de la lista li, dentro del ul del nav y del header*/ float:left; /*para que los enlaces se situen uno al lado del otro en menú horizontal*/ header nav ul li a {/*compuesto de los enlaces de la lista*/ color:#fff; padding:20px; display:block; /* los enlaces por defecto son elementos en línea ("inline element"), por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos, por eso lo pasamos a block, para que la caja ocupe más espacio. 6

7 Sin el display:block, no podríamos modificar el padding superior e inferior, sino solo se podría a izquierda y derecha, ahora se pueden todos*/ text-decoration:none; /*quitamos el subrayado de los links*/ header nav ul li span { /*compuesto elementos span que están dentro de cada li*/ margin-right:10px;/* para separar los iconos de los textos*/ header nav ul li a:hover { background:#037e8c; /*color de enlace al pasar por encima, azul del color de sustitución*/ section { screen and (max-width:800px ) {/*media query, actúa cuando el ancho de pantalla es inferior a 800px*/ header nav { width:80%; /*cambiamos el ancho del nav al 80%*/ height:100%; left:-100%;/*desplazamos el menú a la izquierda de la pantalla, para luego animarlo con jquery*/ margin:0; position: fixed; /* En muchas webs se suele ver el uso de position:fixed para mantener visible un elemento en todo momento aunque se haga scroll en la página.*/ 7

8 header nav ul li { ancho*/ display:block; /*con un display block va a abarcar todo lo que pueda de float:none; /*no flotar, así los elementos de la lista se colocan uno encima del otro, simulando un menú vertical*/ border-bottom:1px solid rgba(255,255,255,.3); /*border bottom blanco de 1 pixel con transparencia del 30%*/.menu_bar { display:block; /*lo hacemos aparecer, antes le habíamos puesto display none*/ width:100%; background:#ccc; /*fondo gris*/.menu_bar.bt-menu { display:block;/* Sin el display:block,no podríamos modificar el padding superior e inferior, solo se podría a izquierda y derecha.*/ padding:20px; background:#024959; /* mismo azul de fondo que el utilizado en el nav*/ color:#fff; text-decoration:none; font-weight: bold; /* fuente bold*/ font-size:25px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; 8

9 .menu_bar span { float:right; /*lleva el botón del menú a la derecha*/ font-size:40px; /*hacemos el botón más grande*/ Código Javascript: $(document).ready(main); /*cuando el documento esté listo, vamos a ejecutar la función main*/ var contador = 1; /* creo una variable llamada contador que es igual a 1*/ function main(){/*función main*/ $('.menu_bar').click(function(){/*al hacer clic sobre el div de clase menú_bar*/ if(contador == 1){ /* si contandor es igual a 1*/ $('nav').animate({ left: '0' /* muestra el menú*/ ); si está pulsado o no*/ contador = 0; /*ponme la variable contador igual a 0, para diferenciar else { /* si no */ contador = 1; $('nav').animate({ left: '-100%' /*esconde el menú*/ ); 9

10 ); PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB ; Añadieno sub-elementos al menú La estructura del menú nos variará de la siguiente manera: <header> <div class="menu_bar"> <a href="#" class="bt-menu"><span class="icon-list2"></span>menú</a> </div> <nav> <ul> <li><a href="#"><span class="icon-house"></span>inicio</a></li> <li><a href="#"><span class="icon-suitcase"></span>trabajos</a></li> <li class="submenu"> <a href="#"><span class="icon-rocket"></span>proyectos<span class="caret icon-arrowdown6"></span></a> <ul class="children"> <li><a href="#">subelemento #1 <span class="icon-dot"></span></a></li> <li><a href="#">subelemento #2 <span class="icon-dot"></span></a></li> <li><a href="#">subelemento #3 <span class="icon-dot"></span></a></li> </ul> </li> <li><a href="#"><span class="icon-earth"></span>servicios</a></li> <li><a href="#"><span class="icon-mail"></span>contacto</a></li> </ul> </nav> </header> 10

11 El menú, un típico menú hecho a base de listas, pero como se puede apreciar los elementos< li> que tienen un submenu dentro tienen una clase llamada.submenú y dentro del <li>, y después del <a> esta otra lista, que es el sub menu, este sub menú tiene la clase.children Y el css final nos quedará: /*reset*/ * { padding:0; margin:0; /*color de fondo body*/ body { background:#fffffa; /*ancho del header*/ header { width:100%; /*compuesto nav dentro del header*/ header nav { width:90%; max-width:1000px; /*ancho máximo de 1000px para que no sobrepase esta medida*/ 11

12 margin:20px auto; /*márgenes top y bottom de 20 px, izquierdo y derecho auto*/ background:#024959; /*color de fondo azul menú*/.menu_bar { display:none; /*hace desaparecer el menú*/ /* Es comúnmente usado para ocultar o mostrar elementos sin eliminarlos. Esto es diferente de visibility. Usar display: none no dejará espacio donde el elemento se encontraba, pero visibility: hidden; dejará un espacio vacío.*/ header nav ul { /*overflow:hidden;*/ /* poner overflow:hidden si no hay subelementos y quitar overflow:hidden si hay subelmentos*/ /* Cuando los contenidos de un elemento no caben en su interior, el navegador debe mostrarlos aunque se salgan del elemento y se solapen con los elementos adyacentes. overflow permite modificar este comportamiento por defecto. Con overflow: hidden, conseguimos que el navegador oculte todos los contenidos que se salen de la caja del elemento*/ list-style:none;/*para no mostrar ningún marcador o viñeta*/ header nav ul li { /*compuesto elemento de la lista li, dentro del ul del nav y del header*/ /*float: left;para que los enlaces se situen uno al lado del otro en menú horizontal solo si no hay subelementos*/ display:inline-block; /*para menus con subelementos*/ 12

13 position:relative; /* en css de submenus, los elementos padre tienen que ser relative y los hijos absolute*/ header nav ul li a{ /*compuesto de los enlaces de la lista*/ padding:20px; color:#fff; display:block; /* los enlaces por defecto son elementos en línea ("inline element"), por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos, por eso lo pasamos a block, para que la caja ocupe más espacio. Sin el display:block, no podríamos modificar el padding superior e inferior, sino solo se podría a izquierda y derecha, ahora se pueden todos*/ text-decoration:none; /*quitamos el subrayado de los links*/ header nav ul li span { /*compuesto elementos span que están dentro de cada li*/ margin-right:10px; /* para separar los iconos de los textos*/ header nav ul li a:hover { background:#037e8c; /*color de enlace al pasar por encima, azul del color de sustitución*/ section { padding:20px; 13

14 /*estilos para los subelementos*/ header nav ul li:hover.children { display:block;/* al pasar por encima de las clases children que esten dentro de un li mostrarlas*/ header nav ul li.children { display: none;/* al dejar de pasar por encima de las clases children ocultarlas*/ background:#011826; /*color de fondo de los subelementos*/ position: absolute; /* en css de submenus, los elementos padre tienen que ser relative y los hijos absolute*/ width: 150%; /*ancho para alargar el submenu*/ z-index:1000;/* para que no haya problemas con sliders que queramos que vayan por debajo o fotos, u otras zonas*/ header nav ul li.children li { display:block; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.5); header nav ul li.children li a { display: block; header nav ul li.children li a span { float: right; 14

15 position: relative; PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB top:3px; /* aqui bajamos un poco los puntitos de los subelementos */ margin-right:0; margin-left:10px; /* por si el texto del subelemanto fuera muy largo, para que los puntitos queden separados*/ header nav ul li.caret { position: relative; top:3px; margin-left:10px; screen and (max-width:800px) { /*media query, actúa cuando el ancho de pantalla es inferior a 800px*/ header nav { width:80%;/*cambiamos el ancho del nav al 80%*/ height:100%; margin:0; position: fixed; /* En muchas webs se suele ver el uso de position:fixed para mantener visible un elemento en todo momento aunque se haga scroll en la página.*/ left:-100%; /*desplazamos el menú a la izquierda de la pantalla, para luego animarlo con jquery*/ /*top:0px;*/ overflow:auto; 15

16 .menu_bar { PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB none*/ display:block; /*lo hacemos aparecer, antes le habíamos puesto display width:100%; background:#ccc; /*fondo gris*/.menu_bar.bt-menu { display:block; /* Sin el display:block,no podríamos modificar el padding superior e inferior, solo se podría a izquierda y derecha.*/ padding:20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background:#024959; /* mismo azul de fondo que el utilizado en el nav*/ overflow: hidden; font-size:25px; font-weight:bold; /* fuente bold*/ color:#fff; text-decoration:none;.menu_bar span { float:right; /*lleva el botón del menú a la derecha*/ font-size:40px; /* hacemos el icono más grande*/ 16

17 header nav ul li { PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB ancho*/ display:block; /*con un display block va a abarcar todo lo que pueda de float:none; /*no flotar, así los elementos de la lista se colocan uno encima del otro, simulando un menú vertical*/ border-bottom:1px solid rgba(255,255,255,.3); /*border bottom blanco de 1 pixel con transparencia del 30%*/ /*estilos para los subelementos*/ header nav ul li:hover.children { display: none; header nav ul li.children { width: 100%; position: relative; header nav ul li.children li a { margin-left:20px; header nav ul li.caret { float: right; Y el archivo main.js: 17

18 $(document).ready(main); PROGRAMACIÓN CON LENGUAJES SCRIPT EN PÀGINES WEB var contador = 1; var ancho = $(document).width(); function main (){ $('.menu_bar').click(function(){ if (contador == 1){ $('nav').animate({ left: '0' ); contador = 0; else { contador = 1; $('nav').animate({ left: '-100%' ); ; ); // Mostramos y ocultamos submenus $('.submenu').click(function(){ $(this).children('.children').slidetoggle(); ); 18

19 ; 19