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

Cmo adaptar el men de nuestra
pgina web a un diseo responsive

ndice de contenidos
1. Entorno de desarrollo
2. Introduccin
3. Instalando las herramientas
4. Diseo inicial de nuestro men
5. Mostrando/ocultando el men en la vista responsive
6. Media queries: haciendo nuestro men responsive
7. Conclusiones
1. Entorno
El tutorial est escrito usando el siguiente entorno:
Hardware: Porttil MacBook Pro 15 pulgadas (2.4 GHz Intel i7, 8GB
1333 Mhz DDR3, 500GB Flash Storage).
Sistema Operativo: Mac OS X Mavericks 10.9.5
Sublime text 2.0.2
jQuery 2.1.3
Normalize.css v3.0.2
2. Introduccin
En los tiempos actuales, el diseo de las pginas web tiene que ser responsive
para que pueda ser navegable desde cualquier tipo de dispositivo. El diseo
responsive implica que las dimensiones y distribucin de los elementos en la
pgina varen en funcin de las dimensiones de la pantalla que est mostrando el
contenido.
Aunque ya disponemos de una gran cantidad de libreras que nos permiten dar un
diseo responsive a nuestras web, como Bootstrap, a veces perdemos
transparencia y no somos conscientes de qu aspectos hay que tener en cuenta

para hacer un diseo lo ms flexible posible.
En este tutorial aprenderemos cmo disear el men de una pgina web
responsive a travs de CSS3 y JavaScript, de modo que en pantallas grandes se
muestre de manera tradicional, opciones de men alineadas en una cabecera, y
para pequeos dispositivos quede oculto y mostrarse slo al hacer click sobre un
elemento concreto de la pgina.
3. Instalando las herramientas

Para
el
desarrollo
de
este
tutorial,
se
han
utilizado
las
herramientas normalize.css y jQuery. Para instalar las ltimas versiones

podemos acceder a los sitios web de jquery y normalize.css y descargar
directamente los fuentes o instalarlos a travs de npm:
Para jquery: npm install jquery
Para normalize.css: npm install normalize.css
En nuestro tutorial, hemos instalado estas dependencias a travs de npm, por lo

que las rutas son relativas al directorio node-modules.
4. Diseo inicial de nuestro men

Vamos a disear una web muy sencilla que constar de lo siguiente:
Una cabecera con un logo en la parte izquierda y un men en la

parte derecha
El men constar de las opciones Archivo, Sobre m y Contacto
El body de nuestra pgina ser un parrfo con texto
Utilizaremos HTML5 para la maquetacin de la pgina index.html, quedando

como sigue:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi web</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" >
</head>
<body>
<header class="page-header">
<div class="center-contents">
<a class="logo" href="#" title=""><img src="images/logo-example.png"
alt=""></a>
<nav class="page-nav">
<ul>
<li><a href="#" title="">Archive</a></li>
<li><a href="#" title="">About us</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="page-contents">
<h1>Titular de la pgina</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae ipsa
beatae consequuntur. Dolor repudiandae fugiat, rem, adipisci sit tenetur dolores corrupti
amet molestiae, consequatur labore. Laboriosam sit voluptate quaerat!</p>
</main>
</body>
</html>
Aadimos los estilos en un fichero aparte styles.css en el directorio raz:
El contenido de la hoja de estilos es el siguiente:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
/************************
HEADER
************************/
.page-header{
overflow: hidden;
background: #444;
padding: 1em 0 0 ;
}
.page-header .center-contents{
max-width: 650px;
margin:auto;
overflow: hidden;
}
.logo{
max-width: 60px;
display: block;
float: left;
margin: 0 0 1em 1em;
}
.logo img{
display: block;
}
.page-nav{
color: #fff;
float:right;
}
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
.page-nav ul, .page-nav li{

list-style:none;
margin:0;
padding: 0;
float: left;
}
.page-nav a{
color: #fff;
width: 100%;
height: auto;
display: block;
padding: 0.75em 1em;
text-decoration: none;
cursor: pointer;
}
/************************
MAIN CONTENTS
************************/
.page-contents{
padding:0 1em;
max-width: 650px;
margin:auto;
}
5
4
5
5
5
6
5
7
5
8
5
9
La apariencia de nuestro men inicial es la siguiente:
5. Mostrando/ocultando el men en la vista responsive

Aunque el diseo de nuestra pgina es responsive, el diseo del men no es el
ms adecuado para dispositivos pequeos. Al igual que hacen libreras como
Bootstrap, vamos a hacer que cuando el tamao sea reducido el men se
comprima y slo al seleccionarlo se despliegue y nos muestre las opciones.
Partiremos de un diseo inicial para resoluciones pequeas en el que aparece
nuestro men oculto y una etiqueta que flote a la derecha de nuestra cabecera y a
la
que
daremos
comportamiento
desplegue/oculte el menu:
para
que
al
hacer
click
sobre
ella
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header class="page-header">
<div class="center-contents">
<div;>
<a class="logo" href="#" title=""><img src="images/logo-example.png"
alt=""></a>
<span class="toggle-nav">Menu</span>
</div;>
<nav class="page-nav collapse">
<ul>
<li><a href="#" title="">Archive</a></li>
<li><a href="#" title="">About us</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</nav>
</div>
</header>
<h1>Titular de la pgina</h1>
</main>
<script type="text/javascript"
src="node_modules/jquery/dist/jquery.min.js"></script>
</body>
</html>
4
3
5
Y las clases CSS que consiguen este efecto son las siguientes:
1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
.page-header{
overflow: hidden;
background: #444;
padding: 1em 0 0 ;
height: 4em;
transition:all .4s linear;
}
.page-nav{
color: #fff;
clear:left;
position: relative;
visibility: inherit;
transition:visibility .4s linear;
}
.page-nav a{
color: #fff;
width: 100%;
height: auto;
display: block;
border-top:#666 1px solid;
cursor: pointer;
}
.toggle-nav {
float: right;
padding: 1em;
color: rgb(255,255,255);
cursor: pointer;
}
.page-nav.collapse {
visibility: hidden;
}
.menu-expanded {
height: 11em;
}
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
Como vemos, el men se oculta a travs de la propiedad de CSS3 de visibility.

Para conseguir un efecto de que el men se expande y contrae al mostrarse,
hemos aadido transiciones en el height del header y en visibility del nav.
Ahora debemos aadir un manejador del evento de click sobre la etiqueta de men
para aadir/quitar las clases que muestran/ocultan el men. Para ello, utilizaremos
jQuery. Creamos en nuestro directorio raz un fichero application.js y lo
referenciamos inmediatamente despus de la librera de jquery en nuestro
index.html:
1
2
3
4
5
6
7
8
9
1
0
1
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
...
1
1
2
1
3
...
1
</main>
4
<script type="text/javascript"
1
src="node_modules/jquery/dist/jquery.min.js"></script>
5
<script type="text/javascript" src="application.js"></script>
1
6
</body>
1
</html>
7
1
8
1
9
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 elementos siempre sern a travs de clases CSS y no de
identificadores:
1
2
3
4
5
6
7
8
9
function toggleNavigation(){
$('.page-header').toggleClass('menu-expanded');
$('.page-nav').toggleClass('collapse');
}
// EVENTOS DEL DOM
$(window).on('load',function(){
$('.toggle-nav').click(toggleNavigation);
});
La apariencia de nuestro men oculto:
Al desplegarlo:
6. Media queries: haciendo nuestro men responsive
Una vez ya tenemos los dos diseos de men, a travs de media queries,
podemos aplicar unas clases u otras a nuestros componentes para as ver el men
con el primer diseo para pantallas grandes (anchura mnima de 700px) y el oculto
para pequeas (mnima de 450px) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/************************
HEADER
************************/
.page-header{
overflow: hidden;
background: #444;
padding: 1em 0 0 ;
height: 4em;
transition:all .4s linear;
}
.page-header .center-contents{
max-width: 650px;
margin:auto;
overflow: hidden;
}
.logo{
max-width: 60px;
display: block;
float: left;
}
.logo img{
display: block;
}
.page-nav{
color: #fff;
/*position: relative;
transition:visibility .4s linear;*/
}
list-style:none;
margin:0;
padding: 0;
}
.page-nav a{
color: #fff;
width: 100%;
height: auto;
display: block;
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
10
0
10
1
10
2
10
3
10
4
10
5
10
6
10
7
border-top:#666 1px solid;
cursor: pointer;
}
.toggle-nav {
float: right;
padding: 1em;
color: rgb(255,255,255);
cursor: pointer;
}
.menu-expanded {
height: 11em;
}
/************************
MAIN CONTENTS
************************/
.page-contents{
padding:0 1em;
max-width: 650px;
margin:auto;
}
/************************
MEDIA QUERIES
************************/
@media only screen and (min-width:450px){
.page-header span{
display: block;
}
.page-nav {
clear:left;
position: relative;
transition:visibility .4s linear;
}
}
.page-header{
height: 4em;
}
.logo{
max-width: 92px;
}
.page-nav{
width: auto;
float: right;
display: block;
clear: none;
visibility: visible;
}
.page-header span{
display: none;
}
10
8
10
9
11
0
11
1
11
2
11
3
11
4
11
5
11
6
11
7
11
8
11
9
12
0
12
1
12
2
12
3
12
4
12
5
12
6
12
7
12
8
12
9
13
0
13
1
13
2
13
3
13
4
13
5
13
6

float: left;
}
.page-nav a {
border-top: none;
}
}
@media only screen and (max-width:699px){
.collapse {
visibility: hidden;
}
}
.collapse {
}
}
Si cambiamos la resolucin de nuestro navegador, vemos cmo la vista del men

cambia.
7. Conclusiones
Ya hemos visto cmo con CSS3 y jQuery podemos hacer un diseo responsive de
nuestra web. Gracias a los nuevos recursos como transformaciones y media
queries con muy poco cdigo conseguimos un diseo adaptado y sin uso de
libreras que pueden afectar al rendimiento de nuestra web.

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

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

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

Загружено:

Авторское право:

Доступные форматы

Cmo adaptar el men de nuestra

pgina web a un diseo responsive

3. Instalando las herramientas

4. Diseo inicial de nuestro men

5. Mostrando/ocultando el men en la vista responsive

6. Media queries: haciendo nuestro men responsive

Sistema Operativo: Mac OS X Mavericks 10.9.5

Sublime text 2.0.2

transparencia y no somos conscientes de qu aspectos hay que tener en cuenta

3. Instalando las herramientas

herramientas normalize.css y jQuery. Para instalar las ltimas versiones

Para jquery: npm install jquery

Para normalize.css: npm install normalize.css

En nuestro tutorial, hemos instalado estas dependencias a travs de npm, por lo

4. Diseo inicial de nuestro men

Una cabecera con un logo en la parte izquierda y un men en la

El men constar de las opciones Archivo, Sobre m y Contacto

El body de nuestra pgina ser un parrfo con texto

Utilizaremos HTML5 para la maquetacin de la pgina index.html, quedando

Aadimos los estilos en un fichero aparte styles.css en el directorio raz:

El contenido de la hoja de estilos es el siguiente:

.page-nav ul, .page-nav li{

La apariencia de nuestro men inicial es la siguiente:

5. Mostrando/ocultando el men en la vista responsive

Como vemos, el men se oculta a travs de la propiedad de CSS3 de visibility.

El script deber controlar el evento de click y al capturarlo hacer un toggle de las

La apariencia de nuestro men oculto:

6. Media queries: haciendo nuestro men responsive

.page-nav ul, .page-nav li{

Si cambiamos la resolucin de nuestro navegador, vemos cmo la vista del men

Вам также может понравиться