Tutorial Como Hacer Un Menú de Navegación Fijo en Pantalla

Tutorial como hacer un menú de navegación fijo en pantalla.
Aprende como hacer un increible menú de navegación fijo en pantalla con CSS.
FalconMasters Carlos Arturo

17 julio, 2014
 CSS
 Diseño Web
 Elementos web
Desde el re diseño de mi sitio web muchas personas han estado
preguntándome acerca de como es que he hecho el menú de navegación de
este sitio, sobre todo la parte para que el menú se quede fijo en pantalla.
La verdad es que es muy fácil, pero tenemos que aplicar algunos truquitos por
hay, para que todo salga como queremos, asi que por eso hoy aprenderemos
como hacer un menú de navegación fijo como este que puedes ver desde el
demo.
Demo del menú de navegación que estaremos
haciendo: http://www.falconmasters.com/demos/menu_fijo/
La estructura que necesitaremos para hacer el menú es la de un menú de
navegación normal y corriente, la estructura es la siguiente:
Estructura html de menú de navegación

XHTML
1 <header>
2 <nav>
3 <ul>
4 <li><a href="#">Inicio</a></li>
5 <li><a href="#">Tutoriales</a></li>
6 <li><a href="#">Cursos</a></li>
7 <li><a href="#">Preguntame algo</a></li>
8 <li><a href="#">Contacto</a></li>
9 </ul>
10 </nav>
11 </header>
Para motivos de este tutorial voy a agregar después de la

etiqueta </header> un contenedor <section> con varios párrafos de texto
dentro, esto para simular que hay contenido en nuestra pagina y poder navegar
con la barra de navegación vertical de nuestro navegador.
A este section le he puesto una clase llamada contenido, y es con la que
diferenciaremos donde empieza el contenido, esta parte si que es
importante, porque mas adelante necesitaremos trabajar con ella.
XHTML
<section class="contenido wrapper">

1
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing commodo aliquet. Fusce
2
bibendum orci magna, a pellentesque augue posuere sed. Ut bibendum magna tincidunt velit fermentum, eu laoreet
3
arcu consectetur. Nullam nec enim sed justo fermentum sagittis. Nam varius dapibus risus, quis consectetur mauris.
4
Praesent ut iaculis turpis. Phasellus congue tristique ligula et consequat.</p>
5

</section>
No te olvides de comenzar el documento eliminando los margenes y

paddings que el navegador agrega por defecto, para eso utilizamos un
pequeño reset con el selector universal *, yo en este caso voy a estar dándole
un margen inferior a los elementos p para que los párrafos muestren un
espaciado en forma de salto de linea.
CSS
1 /*Eliminamos los margenes y paddings que agrega el navegador por defecto*/
2 *{
3 padding: 0;
4 margin: 0;
5 }
6
7 /*Agregamos margenes inferiores a los parrafos*/
8 p{
9 margin-bottom: 20px;
10 }
Ahora si comencemos a darle estilos a nuestro menú de navegación, primero
que nada vamos a darle un 100% de tamaño para que el menú abarque
todo el ancho del documento, después hacemos que el menú se quede fijo,
el truco para que el menú de navegación se quede fijo en pantalla
consiste en aplicarle una propiedad llamada position:fixed; a nuestro
elemento del header.
Pero esto no es todo, también tenemos que agregar la propiedad z-index a
nuestro header, con esto vamos a decirle que el menú se muestre por
encima de los elementos como imágenes que se muestren en
pantalla, que se muestren por debajo de nuestro menú si es que navegamos
hacia abajo por la pagina, normalmente hay problemas con los slideshows,
imágenes, videos, etc, para eso te recomiendo que le pongas un valor alto
al z-index.
Y ya para finalizar la parte de nuestro header, le ponemos un fondo, el fondo
que yo utilizo es un color negro con una opacidad, esto lo hago mediante
colores rgba, los 3 primeros colores son rgb y el cuarto valor es el valor que le
pondremos de opacidad.
CSS
1 header {
2 background: rgba(0,0,0,0.9);
3 width: 100%;
4 position: fixed;
5 z-index: 100;
6 }
De aquí en delante los demás es conocido, lo único que tenemos que hacer es
darle forma a nuestro menú y a los items de la navegación, a continuación el
código, que en realidad es muy sencillo, asi que me delimitare a no explicarlo
todo, simplemente las partes que puedan parecer confusas. Como utilizamos
ya un color negro de fondo yo puse el hover de los items color verde.
CSS
1 nav {
2 float: left; /* Desplazamos el nav hacia la izquierda */
3 }
4
5 nav ul {
6 list-style: none;
7 overflow: hidden; /* Limpiamos errores de float */
8 }
9
10 nav ul li {
11 float: left;
12 font-family: Arial, sans-serif;
13 font-size: 16px;
14 }
15
16 nav ul li a {
17 display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
18 padding: 20px;
19 color: #fff;
20 text-decoration: none;
21 }
22
23 nav ul li:hover {
24 background: #3ead47;
25 }
Una vez aplicado estos últimos estilos, ya tendremos el menú de navegación,

pero hay un problema y es que desde que cargamos la pagina en un
inicio, el menú de navegación tapa una parte del contenido, esto lo
resolvemos muy fácil, basta con agregar un padding
al section="contenido". El padding lo tienes que calcular, y depende del
alto que tenga tu menú, por ejemplo el padding que yo utilizare es de 80px.
CSS
1 .contenido {
2 padding-top: 80px;
3}
Yo agregue también un section con una clase llemada wrapper, la cual me

permite delimitar el tamaño ancho tanto del menu, como del contenido o texto,
en el ejemplo a continuación puedes explorar el código y encontraras este
section junto con sus estilos.
CSS
1 .wrapper {
2 width: 80%;
3 margin: auto;
4 overflow:hidden;
5 }

Tutorial Como Hacer Un Menú de Navegación Fijo en Pantalla

Cargado por

Copyright:

Formatos disponibles

Tutorial Como Hacer Un Menú de Navegación Fijo en Pantalla

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Como Hacer Un Menú de Navegación Fijo en Pantalla

Cargado por

Copyright:

Formatos disponibles

Tutorial como hacer un menú de navegación fijo en pantalla.

FalconMasters Carlos Arturo

Estructura html de menú de navegación

Para motivos de este tutorial voy a agregar después de la

No te olvides de comenzar el documento eliminando los margenes y

Una vez aplicado estos últimos estilos, ya tendremos el menú de navegación,

Yo agregue también un section con una clase llemada wrapper, la cual me

También podría gustarte