Los menús siempre han sido una parte fundamental en cualquier navegación de los sitios web o blogs. A medida que los sitios web han ido evolucionando los elementos como los menús de navegación han mejorado su usabilidad e interactividad.

Existen distintos tipos de menús, los hay para restaurantes, horizontales simples, o con varios niveles.

En este artículo os enseñaremos a hacer un menú que queda fijado a la parte superior de la página por mucho que nos desplacemos hacia abajo a leer el contenido. Recuerda añadir contenido suficiente para que salga la barra de scroll y nos podamos desplazar, de otra forma el menú se quedará arriba simplemente porque no hay nada que desplazar.

Código HTML

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
<div class="contenedor">
<div class="logo"><img src="http://dummyimage.com/200x100/000/fff&text=LOGO" alt="" /></div>
<nav class="menu">
<ul>
 	<li><a href="#">Inicio</a></li>
 	<li><a href="#">Blog</a></li>
 	<li><a href="#">Proyectos</a></li>
 	<li><a href="#">Trabajos</a></li>
 	<li><a href="#">Contacto</a></li>
</ul>
</nav></div>
</header>

 

Se añade un div para el logotipo y otro para el menu, con una clase llamada “contenedor” que se usará para centrar los elementos del menú.

Nota: Recuerda añadir suficiente contenido para que el menú se quede fijo hacia arriba cuando nos desplacemos.

Código CSS

Select Code
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
.contenedor {
width: 95%;
max-width:1000px;
margin:auto;
}

.contenedor p {
margin-bottom:40px;
}

header nav {
background:#3498db;
margin-bottom:10px;
}

header nav ul {
list-style: none;
overflow: hidden;
}

header nav ul li {
float: left;
}

header nav ul li a {
display: block;
padding:20px;
color:#fff;
text-decoration: none;
}

header nav ul li a:hover {
background:#2980b9;
}

/* --- Clase que agregaremos cuando el usuario haga scroll --- */
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
max-width:1000px;
width:100%;
box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

La clase menu-fixed no aparecerá en un primer momento, pero con JQuery haremos que se habilite cuando nos desplazamos hacia abajo hasta cierto punto, añadiéndola a nuestro nav. Así que hay que añadirle esta clase cuando se llegue a determinado punto, que se especifica aquí:

Código JQuery

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
var altura = $('.menu').offset().top;

$(window).on('scroll', function(){
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed');
} else {
$('.menu').removeClass('menu-fixed');
}
});

});

Para saber la distancia entre el menú y la parte superior de la página guardamos una variable llamada “altura” con la información de este dato, para sacar este valor usamos el objeto offset. Recuerda que debemos tener la última versión de las librerías JQuery en nuestro sitio web.

Posteriormente ejecutamos un evento en el que cada vez que el usuario haga scroll se lanzará una condicional que revisará la posición del scroll es mayor a la altura, y si es así se añadirá la clase “.menu-fixed” de la que hemos hablado previamente, de lo contrario se eliminará. Con la clase “.menufixed” también se puede hacer que cuando el menú se quede pegado tenga el 100% de ancho, para ello hay que realizar estas modificaciones:

Select Code
1
2
3
4
5
6
7
8
9
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
/*max-width:1000px;*/
left:0;
width:100%;
box-shadow:0px 4px 3px rgba(0,0,0,.5);
}

Ejemplo de su funcionamiento

Podemos ver un ejemplo de este menú pegado a la parte superior aquí:

Vía | FalconMasters

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!