Al diseñar un sistema de navegación para su sitio web, es importante tener en cuenta las modificaciones dinámicas para manejar el soporte móvil y los diseños receptivos. Pero otro enfoque sistemático es mantener a sus visitantes en control total durante todo el proceso de visualización. Esto a menudo requiere un menú de acceso rápido o un área desplegable para obtener enlaces a otras páginas web.
En este tutorial voy a construir una barra de navegación superior que aparece solo después de ir más allá de la navegación de encabezado. Este efecto es excelente si tiene algunas páginas a las que los visitantes acceden con mayor frecuencia. La barra de navegación pegajosa permanecerá fija en la parte superior de la pantalla y solo desaparecerá cuando vuelva a ingresar a la zona de navegación del encabezado. Para tener una idea de lo que haremos, ¡mira mi ejemplo de demostración en vivo después del salto!
Demo en vivo - Descargar código fuente
Estructurando el documento
Primero debemos crear el espacio de trabajo del proyecto y compilar el código HTML original. Vale la pena señalar que necesitaremos usar algunos jQuery muy básicos junto con los efectos CSS.
Crear un nuevo conjunto de documentos con nombre index.html y estilos.css dentro del mismo directorio. Estoy utilizando una imagen de fondo personalizada y un logotipo en la sección del encabezado. Puede descargar estos recursos junto con mi código fuente si desea ahorrar tiempo. Ahora, en el archivo de índice principal, necesitamos configurar un doctype HTML5 y agregar los enlaces relacionados.
Afortunadamente, muchos de los recursos que necesitamos se pueden alojar externamente. Nuestra fuente web personalizada de Google llamada Capriola diseña el texto del encabezado y también necesitamos una copia de la última biblioteca jQuery alojada en el código CDN de Google. La mayor parte de esto debería ser familiar, así que ahora vamos a saltar al contenido del cuerpo.
Bloques de construcción HTML
El diseño no es tan complicado como se podría pensar. En la parte superior, después de abrir la etiqueta del cuerpo, necesitamos configurar la barra de navegación fija. Este elemento utilizará pantalla: ninguna; inicialmente permanecer oculto hasta después de desplazarse un poco por la página.
El elemento interno de UL centrará todos los enlaces para que estén en la misma ubicación que el contenido principal. Luego, debajo de esta barra de navegación, configuramos el div de envoltorio principal que centra la página en un ancho de 710 px, menos 30 px para el relleno. El total llega a 680 píxeles, que es el tamaño perfecto para el regalo de promoción de Pontus Johansson utilizado en el diseño del banner.
La barra de navegación principal tiene exactamente los mismos enlaces que mantenemos en la barra de encabezado fija. Esto se hizo así por diseño, sin embargo, usted podría cambiar las cosas y colocar solo los enlaces más importantes en su navegación fija. El encabezado puede contener menús desplegables que también se sienten fuera de lugar en una barra de navegación fija deslizante.
Personalizando CSS
Antes de manejar el breve fragmento de JavaScript, permítame explicarle cómo podemos diseñar todo este código. Primero, estoy usando un estilo más personalizado de reinicios basado en la hoja de estilo original de Eric Meyer. He definido el tamaño de caja propiedad como casillero para que los valores de ancho exacto incluyan margen / relleno y no se expandan, como es el comportamiento predeterminado.
La imagen de fondo está usando Debut Dark del sitio web de patrones sutiles. Hay muchas texturas de repetición fantásticas que puedes descargar de forma gratuita para mejorar la calidad de tus diseños. Pero moviéndonos hacia la estructura central, necesitamos configurar un contenedor de envoltura para que se llene naturalmente en el contenido del centro. Además, el fondo debe aparecer blanco en el área de contenido, pero no en la sección de encabezado completo.
He configurado un degradado de fondo de repetición muy colorido en el menú de navegación principal. También utilizando una altura fija para la barra podemos configurar el mismo valor fijo para altura de la línea Propiedades en los elementos de la lista. Esto obliga a que todo el texto se centre verticalmente dentro del contenedor de la barra de navegación. He incluido algunas propiedades de transición CSS3 para manejar un estado de desplazamiento más elegante.
Arreglando la barra de navegación oculta
En la parte inferior de nuestra hoja de estilos CSS encontrará todos los códigos relacionados con nuestra navegación superior fija. El contenedor abarca el 100% del ancho de la página para que veamos la barra que aparece en toda la pantalla. Pero el objeto interno de UL mantiene todos los enlaces centrados en la misma posición que nuestro contenido. También el color de fondo se aplica utilizando la sintaxis rgba () para la transparencia alfa.
Nuevamente podemos ver una altura fija a 80px que es bastante grande en comparación con la original. Pero sí te llama la atención y los enlaces son muy fáciles de maniobrar. Quería mantener un efecto de animación similar usando transiciones CSS3 al pasar el cursor. Así que los enlaces completan otro fondo de 30% que parece más oscuro, pero aún transparente para el contenido detrás de él.
Manejo de animaciones de JavaScript
Estoy mirando la parte inferior de nuestro archivo index.html antes del cierre final etiqueta. Aquí quiero agregar un poco de JavaScript que manejará los efectos de desplazamiento para mostrar y ocultar la barra de navegación fija. Podemos dividirla línea por línea para las cosas más complicadas.
La llamada jQuery típica hace una pausa en la ejecución para que el DOM termine de renderizarse antes de ejecutar cualquier código. También podemos ignorar el primer bloque que usa la línea. e.preventDefault (); para detener enlaces de anclaje de carga. Lo más importante se maneja dentro del detector de eventos para $ (ventana) .on ('scroll') que está activando una nueva función cada vez que el usuario se desplaza hacia arriba o hacia abajo.
La variable? Scrolltop? Contiene el valor en píxeles desde la parte superior de la pantalla. Esto se actualizará cada vez que el usuario se desplace a una nueva ubicación. Usando este valor, podemos verificar si el usuario se ha desplazado más allá de 215px y, de ser así, mostrar la barra de navegación oculta. Por otro lado, si se desplazan hacia arriba a 210px o menos, sabemos que la barra de navegación del encabezado principal está a la vista, por lo que ocultamos la barra de navegación fija y despejamos el espacio de la pantalla.
Demo en vivo - Descargar código fuente
Pensamientos finales
Aunque este es un efecto relativamente simple, el código puede ser confuso si no está familiarizado con JavaScript. Dedique un poco de tiempo a revisar mis fragmentos para asegurarse de que comprende cómo mostramos y ocultamos el menú. También puede descargar una copia del código fuente de mi proyecto y jugar por su cuenta. Si desea enviar alguna pregunta o comentario sobre este tutorial, háganoslo saber en el hilo de discusión posterior.