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

0

0

Share on Pinterest

0

0

Comparte con tus amigos

Tu nombre

Tu e-mail

E-mail del destinatario

Enter a Message
Leí este artículo y me pareció muy interesante, pensé que te podría gustar. El artículo se llama Tutorial como hacer un menú de navegación fijo en pantalla. te comparto el link https://www.falconmasters.com/web-design/tutorial-menu-de-navegacion-fijo/.

Captcha

Enviar

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

<header>
	<nav>
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Tutoriales</a></li>
			<li><a href="#">Cursos</a></li>
			<li><a href="#">Preguntame algo</a></li>
			<li><a href="#">Contacto</a></li>
		</ul>
	</nav>
</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.

<section class="contenido wrapper">

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

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

/*Eliminamos los margenes y paddings que agrega el navegador por defecto*/
* {
  padding: 0;
  margin: 0;
}

/*Agregamos margenes inferiores a los parrafos*/
p {
  margin-bottom: 20px;
}

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.

header {
  background: rgba(0,0,0,0.9);
  width: 100%;
  position: fixed;
  z-index: 100;
}

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.

nav {
  float: left; /* Desplazamos el nav hacia la izquierda */
}

nav ul {
  list-style: none;
  overflow: hidden; /* Limpiamos errores de float */
}

nav ul li {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

nav ul li a {
  display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
  padding: 20px;
  color: #fff;
  text-decoration: none;
}

nav ul li:hover {
  background: #3ead47;
}

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.

.contenido {
  padding-top: 80px;
}

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.

.wrapper {
  width: 80%;
  margin: auto;
  overflow:hidden;
}

Menú de navegación fijo:

See the Pen Menu fijo en pantalla by Carlos Arturo Esparza (@falconmasters) on CodePen.5968

0

0

Share on Pinterest

0

0

Comparte con tus amigos

Tu nombre

Tu e-mail

E-mail del destinatario

Enter a Message
Leí este artículo y me pareció muy interesante, pensé que te podría gustar. El artículo se llama Tutorial como hacer un menú de navegación fijo en pantalla. te comparto el link https://www.falconmasters.com/web-design/tutorial-menu-de-navegacion-fijo/.

Captcha

Enviar