cómo adaptar el menú de nuestra página web a un diseño responsive
TRANSCRIPT
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
1/15
Cómo adaptar el menú de nuestrapágina web a un diseño responsiveÍndice de contenidos
1. Entorno de desarrollo
2. Introducción
3. Instalando las herramientas
4. Diseño inicial de nuestro menú
5. Mostrando/ocultando el menú en la vista responsive
. Media !ueries" haciendo nuestro menú responsive
#. $onclusiones
1. Entorno
El tutorial está escrito usando el siguiente entorno:
%ard&are" 'ort(til Mac)oo* 'ro 15 pul+adas ,2.4 -% Intel i# 0-)
1333 Mh DD3 5-) lash tora+e.
istema 6perativo" Mac 6 7 Maveric*s 1.8.5
u9lime te:t 2..2
;ormalie.css v3..2
2. Introducción
En los tiempos actuales, el diseño de las páginas web tiene que ser responsive
para que pueda ser navegable desde cualquier tipo de dispositivo. El diseño
responsive implica que las dimensiones y distribución de los elementos en la
página varíen en función de las dimensiones de la pantalla que está mostrando el
contenido.
Aunque ya disponemos de una gran cantidad de librerías que nos permiten dar un
diseño responsive a nuestras web, comoBootstrap, a veces perdemos
http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#01http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#02http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#03http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#04http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#05http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#06http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#07http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#02http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#03http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#04http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#05http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#06http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#07http://www.adictosaltrabajo.com/tutoriales/menu-responsive/#01
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
2/15
transparencia y no somos conscientes de qué aspectos hay que tener en cuenta
para hacer un diseño lo más flexible posible.
En este tutorial aprenderemos cómo diseñar el menú de una página web
responsive a través de CSS3 y JavaScript, de modo que en pantallas grandes se
muestre de manera tradicional, opciones de menú alineadas en una cabecera, y
para pequeños dispositivos quede oculto y mostrarse sólo al hacer click sobre un
elemento concreto de la página.
3. Instalando las herramientas
Para el desarrollo de este tutorial, se han utilizado las
herramientasnormalize.css y jQuery. Para instalar las últimas versiones
podemos acceder a los sitios web de ;!uer= ynormalie.css y descargar
directamente los fuentes o instalarlos a través de npm:
'ara jquery" npm install ;!uer=
'ara normalize.css" npm install normalie.css
En nuestro tutorial, hemos instalado estas dependencias a través de npm, por lo
que las rutas son relativas al directorionodemodules.
4. Diseño inicial de nuestro menú
Vamos a diseñar una web muy sencilla que constará de lo siguiente:
?na ca9ecera con un lo+o en la parte i!uierda = un menú en la
parte derecha El menú constar( de las opciones !rc"ivo# $obre m% y Contacto
El 9od= de nuestra p(+ina ser( un parr(@o con te:to
Utilizaremos HTML5 para la maquetación de la páginainde&."tml, quedando
como sigue:
http://jquery.com/download/http://jquery.com/download/http://necolas.github.io/normalize.css/http://jquery.com/download/http://necolas.github.io/normalize.css/
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
3/15
12345#
0811112131415
11#101822122
23242522#2028
ABD6$C'E html Ahtml lan+FGenG Ahead Ameta charsetFG?CH0G AtitleMi &e9A/title Ameta nameFGvie&portG contentFG&idthFdeviceH&idth initialHscaleF1G / Alin* relFGst=lesheetG hre@FGnodemodules/normalie.css/normalie.cssG A/head A9od= Aheader classFGpa+eHheaderG Adiv classFGcenterHcontentsG Aa classFGlo+oG hre@FGJG titleFGGAim+ srcFGima+es/lo+oHe:ample.pn+GaltFGGA/a
Anav classFGpa+eHnavG Aul AliAa hre@FGJG titleFGGKrchiveA/aA/li AliAa hre@FGJG titleFGGK9out usA/aA/li AliAa hre@FGJG titleFGG$ontactA/aA/li A/ul A/nav A/div A/header
Amain classFGpa+eHcontentsG Ah1Citular de la p(+inaA/h1 ApLorem ipsum dolor sit amet consectetur adipisicin+ elit.
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
4/15
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
5/15
2122232
42522#202833
13233343533#3
0384414243444
544#40485515
253
.pa+eHnav ul .pa+eHnav liN
listHst=le"noneP mar+in"P paddin+" P Ooat" le@tP Q
.pa+eHnav aN
color" JR@P &idth" 1SP hei+ht" autoP displa=" 9loc*P paddin+" .#5em 1emP te:tHdecoration" noneP cursor" pointerP Q
/ MKI> $6>CE>C
/
.pa+eHcontentsN paddin+" 1emP ma:H&idth" 5p:P mar+in"autoP Q
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
6/15
545555
#5058
La apariencia de nuestro menú inicial es la siguiente:
5. Mostrando/ocultando el menú en la vista responsive
Aunque el diseño de nuestra página es responsive, el diseño del menú no es elmás adecuado para dispositivos pequeños. Al igual que hacen librerías como
Bootstrap, vamos a hacer que cuando el tamaño sea reducido el menú se
comprima y sólo al seleccionarlo se despliegue y nos muestre las opciones.
Partiremos de un diseño inicial para resoluciones pequeñas en el que aparece
nuestro menú oculto y una etiqueta que flote a la derecha de nuestra cabecera y a
la que daremos comportamiento para que al hacer click sobre ella
desplegue/oculte el menu:
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
7/15
12345#08111
1213141511#10
1822122232425
22#202833132
333
ABD6$C'E html Ahtml lan+FGenG Ahead Ameta charsetFG?CH0G AtitleMi &e9A/title Ameta nameFGvie&portG contentFG&idthFdeviceH&idth initialHscaleF1G / Alin* relFGst=lesheetG hre@FGnodemodules/normalie.css/normalie.cssG A/head A9od= Aheader classFGpa+eHheaderG Adiv classFGcenterHcontentsG AdivP Aa classFGlo+oG hre@FGJG titleFGGAim+ srcFGima+es/lo+oHe:ample.pn+G
altFGGA/a Aspan classFGto++leHnavGMenuA/span A/divP
Anav classFGpa+eHnav collapseG Aul AliAa hre@FGJG titleFGGKrchiveA/aA/li AliAa hre@FGJG titleFGGK9out usA/aA/li AliAa hre@FGJG titleFGG$ontactA/aA/li A/ul A/nav A/div A/header
Amain classFGpa+eHcontentsG Ah1Citular de la p(+inaA/h1 ApLorem ipsum dolor sit amet consectetur adipisicin+ elit.
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
8/15
435
Y las clases CSS que consiguen este efecto son las siguientes:
12345
#081111213141511#10182212223242522#2028
3
.pa+eHheaderN overOo&" hiddenP 9ac*+round" J444P paddin+" 1em P hei+ht" 4emP
transition"all .4s linearP Q
.pa+eHnavN color" JR@P clear"le@tP position" relativeP visi9ilit=" inheritP transition"visi9ilit= .4s linearP Q
.pa+eHnav aN color" JR@P &idth" 1SP hei+ht" autoP displa=" 9loc*P paddin+" .#5em 1emP te:tHdecoration" noneP 9orderHtop"J 1p: solidP cursor" pointerP
Q
.to++leHnav N Ooat" ri+htP paddin+" 1emP mar+in" 1em 1emP color" r+9,255255255P cursor" pointerP Q
.pa+eHnav.collapse N visi9ilit=" hiddenP
Q
.menuHe:panded N hei+ht" 11emP Q
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
9/15
3132333
43533#303844
142434445
Como vemos, el menú se oculta a través de la propiedad de CSS3 de visibility.
Para conseguir un efecto de que el menú se expande y contrae al mostrarse,
hemos añadidotransiciones en el height del header y en visibility del nav.
Ahora debemos añadir un manejador del evento de click sobre la etiqueta de menú
para añadir/quitar las clases que muestran/ocultan el menú. Para ello, utilizaremos
jQuery. Creamos en nuestro directorio raíz un fichero application.js y lo
referenciamos inmediatamente después de la librería de jquery en nuestro
index.html:
12345#08
11
ABD6$C'E html Ahtml lan+FGenG Ahead Ameta charsetFG?CH0G AtitleMi &e9A/title Ameta nameFGvie&portG contentFG&idthFdeviceH&idth initialHscaleF1G / Alin* relFGst=lesheetG hre@FGnodemodules/normalie.css/normalie.cssG A/head A9od=
...
Amain classFGpa+eHcontentsG
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
10/15
1121314
1511#1018
... A/main
Ascript t=peFGte:t/;avascriptGsrcFGnodemodules/;!uer=/dist/;!uer=.min.;sGA/script Ascript t=peFGte:t/;avascriptG srcFGapplication.;sGA/script
A/9od= A/html
El script deberá controlar el evento de click y al capturarlo hacer un toggle de las
clases .collapse y .menu-expanded en la etiqueta y header respectivamente. Los
selectores de elementossiempre serán a través de clases CSS y no de
identificadores:
12345#08
@unction to++le>avi+ation,N T,U.pa+eHheaderU.to++le$lass,UmenuHe:pandedUP T,U.pa+eHnavU.to++le$lass,UcollapseUP Q
// EVE>C6 DEL D6M T,&indo&.on,UloadU@unction,N T,U.to++leHnavU.clic*,to++le>avi+ationP QP
La apariencia de nuestro menú oculto:
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
11/15
Al desplegarlo:
6. Media queries: haciendo nuestro menú responsive
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
12/15
Una vez ya tenemos los dos diseños de menú, a través de media queries,
podemos aplicar unas clases u otras a nuestros componentes para así ver el menú
con el primer diseño para pantallas grandes (anchura mínima de 700px) y el oculto
para pequeñas (mínima de 450px) :
1234
5#08
1111213141511#10
182212223242522#202833132
33343533#30384414243444544#4048
/ %EKDE /
.pa+eHheaderN overOo&" hiddenP 9ac*+round" J444P paddin+" 1em P hei+ht" 4emP
transition"all .4s linearP Q
.pa+eHheader .centerHcontentsN ma:H&idth" 5p:P mar+in"autoP overOo&" hiddenP Q
.lo+oN ma:H&idth" p:P displa=" 9loc*P Ooat" le@tP mar+in" 1em 1emP Q
.lo+o im+N displa=" 9loc*P Q
.pa+eHnavN color" JR@P
/position" relativeP visi9ilit=" inheritP transition"visi9ilit= .4s linearP/ Q
.pa+eHnav ul .pa+eHnav liN listHst=le"noneP mar+in"P paddin+" P Q
.pa+eHnav aN color" JR@P &idth" 1SP hei+ht" autoP displa=" 9loc*P paddin+" .#5em 1emP
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
13/15
551525354555
5#505812345#08#
#1#2#3#4#5####0#8001020304
0500#00088818283848588#80
881
11
12
13
14
15
1
1#
te:tHdecoration" noneP 9orderHtop"J 1p: solidP cursor" pointerP
Q
.to++leHnav N
Ooat" ri+htP paddin+" 1emP mar+in" 1em 1emP color" r+9,255255255P cursor" pointerP Q
.menuHe:panded N hei+ht" 11emP Q
/
MKI> $6>CE>C /
.pa+eHcontentsN paddin+" 1emP ma:H&idth" 5p:P mar+in"autoP Q
/ MEDIK
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
14/15
10
18
11
11
1112
113
114
115
11
11#
11
0118
12
121
122
123
124
12
512
12#
120
128
13
131
13
2133
134
135
13
.pa+eHnav ul .pa+eHnav liN Ooat" le@tP
Q .pa+eHnav a N
9orderHtop" noneP Q
Q
Wmedia onl= screen and ,ma:H&idth"88p:N .collapse N visi9ilit=" hiddenP Q Q
Wmedia onl= screen and ,minH&idth"#p:N .collapse N visi9ilit=" inheritP Q Q
Si cambiamos la resolución de nuestro navegador, vemos cómo la vista del menú
cambia.
-
8/18/2019 Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive
15/15
7. Conclusiones
Ya hemos visto cómo con CSS3 y jQuery podemos hacer un diseño responsive de
nuestra web. Gracias a los nuevos recursos como transformaciones y media
queries con muy poco código conseguimos un diseño adaptado y sin uso de
librerías que pueden afectar al rendimiento de nuestra web.