Navegación dinámica cajón deslizante en JavaScript puro-Hipsbar

Vista prévia

Descripción

Hipsbar. js es una biblioteca nativa de JavaScript para generar dinámicamente una navegación de cajón deslizante (fuera de lienzo) en la aplicación Web.

El Hipsbar facilita la creación de la navegación de la aplicación móvil deslizándose desde la parte superior/derecha/inferior/izquierda de la pantalla al alternar.

También proporciona un efecto de desenfoque en el contenido principal cuando se activa la navegación del cajón.

Funcionamiento

Importa el JavaScript y la hoja de estilo del Hipsbar en la página.

<link rel="stylesheet" href="./dist/Hipsbar.css">
<script src="./dist/Hipsbar.js"></script>

Prepare los datos de navegación (nombre del menú & URL) en el código JavaScript.

const myData = [



{ content: 'HOME', url: '#' },



{ content: 'CSS', url: '#' },



{ content: 'SCRIPT', url: '#' },



{ content: 'COM', url: '#' },



{ content: 'CONTACT', url: '#' },



{ content: 'ABOUT', url: '#' },
]

También se admiten los elementos de menú de varios niveles.

const myData = [



{




content: 'JavaScript',




children: [{





content: 'Frameworks',





url: '#',






children: [






content: 'VUE',






url: 'https://www.vuejs.org'




]},



...


]}
]

Cree un elemento de desencadenador para alternar la navegación del cajón.

<a href="#" id="trigger">Launch</a>

Inicializar el Hipsbar para habilitar la navegación del cajón que se deslizará hacia fuera desde el lado izquierdo de la Página Web.

new Hipsbar({


activator: '#trigger',


myData
})

Personaliza la posición de la navegación del cajón. Valores disponibles:

• Arriba
• Izquierda (predeterminada)
• Correcto
• Parte inferior

new Hipsbar({


activator: '#trigger',


data: myData,


position: 'right'
})

Determine si se desenfoca el contenido principal cuando se activa la navegación del cajón.

new Hipsbar({


activator: '#trigger',


data: myData,


position: 'right',


overlay: true,


blur: true
})

Ajuste el ancho de la navegación del cajón está activado.

new Hipsbar({


activator: '#trigger',


data: myData,


width: 300
})

Cargar datos desde un archivo externo:

new Hipsbar({





dataURL: 'data.json'


})

Registro de cambios

08/13/2018

• • agregada función elementos secundarios. agregada carga de la función mediante Ajax.

08/10/2018

• Se han añadido más opciones