Inicialización
Dependiendo de las funcionalidades que necesitemos de la barra de navegación vamos a tener que
inicializar el módulo correspondiente a este elemento.
En esta documentación se mostrarán todos los casos posibles de como colocar el nav a diferentes circunstancias.
La recomendación es ver Get Started página en la cual se muestra
como añadir la lógica de la biblioteca.
// CDN : https://raw.githack.com/FedeManzano/bodystyle/refs/heads/master/dist/js/bodystyle.min.js
// 1 OPCIÓN ESTÁTICA
// ------------------
// Inicializa el elemento
// cuando estos están dispuestos de manera estática dentro del DOM
/**
* CUATRO PARÁMETROS DE LOS CUALES EL PRIMERO ES OBLIGATORIO
* contexto: ID que se utiliza para definir el contexto
* colorFuente: Color del texto del tab (Estilos de texto)
* colorFondo: Color del fondo del tab (Clases colores)
* colorBorde: Borde selector (Color de fondo)
*/
BS.NavigationInit("#ID_ DEL_ NAV") // Importante parámetro porque permite definir el contexto
// Donde se aplicarán las diferentes funciones y eventos.
/****************************************************************************/
// 2 OPCIÓN DINÁMICA
// -----------------
/*
En proyectos donde se tabaja a través de injección de elementos a través
de JavaScript de manera dinámica, y el elemento que se estudia en esta sección se
ingresa de esta manera, es necesario aplicar un retraso en la inicialización del
módulo con el siguiente codigo.
*/
//Si los elementos que conforman esta funcionalidad son dinámicos
// Agregados a través de JS
window.onload = () => {
setTimeout( () => {
BS.NavigationInit("#ID_ DEL_ NAV") // Importante parámetro porque permite definir el contexto
// Donde se aplicarán las diferentes funciones y eventos.
}, 100);
}
Muestra Por Default
El nav por default de la biblioteca se muestra a continuación.
Es importante aclarar que el Nav se intentará adaptar a cualquier tipo de pantalla
y sin las funcionalidades de javascript la lista de enlaces de la barra de navegación
no se verá en equipos menores a 1030px, por esta razón es necesario conocer todo lo
que podemos hacer con los estilos y también como inicializar la lógica del manejo del elemento.
Como se puede observar hay dos medidas, md y lg que según las circunstacias puede ser mejor uno que otro, eso le toca al lector la elección del nav mas conveniente.
Estructura
Conociendo la estructura es más fácil recordar como se compone este elemento y es mas sencillo incorporarlo.
Enlaces a la Derecha
Con la clase .align-right-list podemos alinear los enlaces a la derecha.
Colores
Los colores son diversos, se puede utilizar toda la paleta de colores de la biblioteca, por simplicidad
solo vamos a defir algunos pero es importante que revisen esa parte de la documentación
Fondos.
Desde la versión 4.8.0 se añadieron Íconos
a la biblioteca y debajo hay un ejemplo de como incorporar estos elementos al nav.
Borde Inferior
Es posible mejorar la visual del nav con un borde inferior que se colocará justo debajo de los límites de la barra de navegación.
Contenido a la Derecha
El nav permite agregar contenido a la derecha de manera tal de tener separados los enlaces con ese contenido.
Nav Fija
Disponemos de una clase que permite que la barra de navegación se mantenga fija en la parte
superior de la pantalla, de esta forma estará presente a los largo del recorrido de todo el contenido
permitiendole al usuario utilizar el nav en todo momento.
Nav Resposive
Ahora llegamos a la parte de la documentación en la que aplicamos lo visto hasta ahora pero agregamos la lógica de javascript para desplegar un sidebar que permite ver el contenido de manera adecuada en todos los dispositvos.
Ver Una MuestraCódigo Html
Código de Inicialización del Ejemplo
/**
La inicialización del elemento se lleva a cabo a través del ID
de la barra de navegación para que la biblioteca conozca el contexto
del elemento en el que está trabajando.
Luego, como es un Nav que posee un borde inferior pasamos un segundo parámetro
con un valor true.
*/
// el ID en este ejemplo es #nav, ustedes
// pasan el parámetro de Id que configuraron
BS.NavigationInit("#na", true)