Navegación de cabecera de solo CSS adaptable-Luxbar

Vista prévia

Descripción

Luxbar es una biblioteca de CSS que se utiliza para crear una navegación de cabecera adaptable y móvil que es totalmente personalizable a través de clases CSS.

Instalación

bower install luxbar

Funcionamiento

Importe la biblioteca Luxbar. CSS a su proyecto Web.

<link rel="stylesheet" href="hluxbar.css">

La estructura HTML principal para la navegación del encabezado.

<div class="luxbar LUXBAR-STYLE-NAME">

<input type="checkbox" id="luxbar-checkbox">

<div class="luxbar-menu LUXBAR-MENU-COLORSCHEME">


<ul class="luxbar-navigation">



<li class="luxbar-header">





<a class="luxbar-brand" href="#">Logo</a>





<label class="luxbar-hamburger LUXBAR-ANIMATION-STYLE" for="luxbar-checkbox">






<span></span>





 </label>



</li>



<li class="luxbar-item active"><a href="#">Home</a></li>



<li class="luxbar-item"><a href="#">About</a></li>



<li class="luxbar-item"><a href="#">Contact</a></li>



<li class="luxbar-item"><a href="#">Blog</a></li>


</ul>

</div>
</div>

Establezca los estilos de la navegación de cabecera utilizando estas clases CSS:

• luxbar-default: estilo por defecto
• luxbar-Static: ajustar todo el ancho de la ventana
• luxbar-fijo: siempre visible en la página de desplazamiento

Cambiar el esquema de color predeterminado:

• luxbar-menu-Light
• luxbar-menu-Dark
• luxbar-menu-transparente
• luxbar-menu-material-rojo
• luxbar-menu-material-Indigo
• luxbar-menu-material-Cyan
• luxbar-menu-material-verde
• luxbar-menu-material-Amber
• luxbar-menu-material-Brown
• luxbar-menu-material-bluegrey

Establezca el tipo de animación para el menú de la hamburguesa alternar en dispositivos móviles.

• Luxury-Hamburger-spin
• luxbar-Hamburger-doublespin