Al construir una página web simple, a menudo puede tener sentido ajustar el contenido en un diseño único en lugar de en varias páginas. Estos sitios web de una sola página son beneficiosos cuando tiene un pequeño proyecto o cartera que necesita presencia en línea. Si divide el contenido en secciones ordenadas, los visitantes pueden usar una pequeña navegación deslizante para avanzar rápidamente a lo largo de la página.
En este tutorial, quiero demostrar cómo puede crear una navegación deslizante personalizada con jQuery. Hay muchos complementos alternativos que proporcionan estas características y también ahorrarán tiempo. Pero quiero mostrar cómo podemos hacer este efecto usando solo jQuery y el complemento scrollTo para un rendimiento optimizado. Echa un vistazo a mi demostración de muestra en vivo para echar un vistazo a lo que vamos a hacer.
Demo en vivo - Descargar código fuente
Empezando
Primero, descargué una copia local de jQuery para guardar con los otros archivos de script. También necesitamos una copia del complemento jQuery.scrollTo que es un solo archivo .js. He creado dos archivos alternativos. index.html y estilos.css para la estructura de la página. Podemos desglosar los contenidos principales primero.
El contenido del encabezado debe ser sencillo, sin nada demasiado complicado. El archivo de índice utiliza un doctype HTML5 junto con la hoja de estilo y los dos archivos JS que descargamos. Obviamente, existen alternativas para personalizar el efecto de desplazamiento, pero en esta situación es mucho más fácil implementar un complemento. Dentro de la página HTML podemos ver cómo se configura la navegación.
Toda la página está contenida dentro de un envoltorio usando la ID #w. Otro div #contenido Marca el contenido interno en la página. Esta navegación fija se mantiene dentro del contenido de la página para mi demo, pero teóricamente podría moverlo a cualquier otro lugar que se ajuste bien. Como se solucionará, siempre puede hacer que el menú se desplace hacia la derecha junto con el usuario, sin importar la ubicación.
El contenedor #stickynav se utiliza para mantener todos los elementos internos sobre el contenido de la página. Estoy utilizando la propiedad de índice z de CSS junto con flotantes internos en todos los elementos de la lista. Observe que todos los valores HREF apuntan hacia un signo de hash ubicado en otro lugar de la página. Podemos usar este valor para determinar dónde debe ir nuestro control deslizante.
Contenido interno
Después de cerrar el bloque de navegación encontramos un pequeño número de secciones de contenido. Hay mucho espacio adicional entre el contenido, solo para que pueda ver cómo se comportaría en una página web típica. Cada contenedor de bloques está utilizando el HTML5
elemento junto con un nombre de clase .sección.
La clase se usa para los estilos duplicados que se encuentran en cada una de las áreas de contenido. Ahorrará espacio en la hoja de estilo cuando copie varias propiedades para cada elemento. Al dirigirnos a la ID de sección, podríamos aplicar fondos únicos, colores de texto, sombras de cuadro y otros efectos similares.
Este método puede incluir tantas secciones de contenido interno como necesites. Aunque el menú de navegación eventualmente puede crecer demasiado ancho. En este caso, también podría colocarse en la parte superior como una barra de navegación fija. Lo guardé dentro de la división de contenido para que podamos ver cómo funciona la solución creada alrededor de una plantilla de página. Vamos a saltar a los estilos CSS para más detalles.
Diseño de página CSS
Realmente quería distinguir entre la barra superior y esta navegación fija fija. Podríamos haber arreglado la barra de navegación marrón superior que también contiene un enlace, pero esto puede consumir una pequeña parte del diseño. En lugar de eso, he creado una nueva lista desordenada y he diseñado cada enlace para que flote uno junto al otro, manteniendo el menú más compacto y compacto.
Mirando al contenedor #stickynav notará que esto abarcará la totalidad del ancho de la página. El uso de un fondo transparente ciertamente no se nota, pero tenga esto en cuenta, ya que puede expandir la navegación aún más para llenar el contenedor de la página exterior.
Otra parte interesante de mi hoja de estilo tiene las entradas de formulario y los contenedores de páginas. Todas estas reglas se encuentran en la parte inferior del archivo junto con las actualizaciones de tipografía. Observe cómo cada encabezado se centra en la página para ofrecer espacio al lado para estos elementos de navegación. No sería difícil realinear estos encabezados al lado derecho, lo que da aún más espacio para los enlaces de navegación.
No tengo el formulario de contacto que envía, pero quería que tuviera algunos estilos personalizados decentes. Sin duda, nada especial, pero restablece las fuentes y los colores predeterminados. Además, si necesita expandir el área de contenido central, puede encontrar la propiedad width: 750px adjunta en el contenedor exterior. Nada fuera de lo común, pero es bueno entender estos estilos básicos.
Desplazamiento suave con jQuery
Ahora, este bloque final de código es bastante simple, incluso si apenas comprende las secuencias de comandos. He añadido una nueva etiqueta antes de mi cierre que se dirige a los enlaces de anclaje de navegación fijos. Cada vez que un usuario hace clic, extraemos el valor de hash y nos desplazamos inmediatamente a esa sección de la página.
El método jQuery .click () incluye un parámetro para el controlador de eventos. Con este parámetro cancelamos el comportamiento predeterminado para que el navegador no salte de la página. Luego, jQuery scrollTo se ejecuta dirigiéndose al valor de enlace actual this.hash.
El efecto es simple pero útil porque puede implementar el concepto de página muy rápidamente. Estoy seguro de que hay otros complementos similares relacionados con jQuery scrollTo, y si tiene tiempo, puede ser divertido jugar con alternativas.
Demo en vivo - Descargar código fuente
Pensamientos finales
Los sitios web más simples no requieren un sistema de menús complejo y el uso de técnicas como esta puede ayudar a organizar el contenido. Espero que este tutorial pueda ser de utilidad para los desarrolladores que crean un diseño de página web simple. jQuery es muy extensible y es fácil expandir este código base en su propio complemento de jQuery. No dude en descargar una copia de mi código fuente y ver si puede incorporar este efecto en proyectos futuros.