Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive

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


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/


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.


4/15


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


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:


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/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


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


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:


11/15

Al desplegarlo:

6. Media queries: haciendo nuestro menú 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


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


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.


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.

Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive

Documents

Transcript of Cómo Adaptar El Menú de Nuestra Página Web a Un Diseño Responsive