Author: | balzss |
---|---|
Views Total: | 4,377 views |
Official Page: | Go to website |
Last Update: | February 1, 2017 |
License: | MIT |
Preview:

Description:
Luxbar is a CSS library used for creating a responsive, mobile-friendly header navigation that is fully customizable via CSS classes.
Installation:
bower install luxbar
How to use it:
Import the Luxbar.css library into your web project.
<link rel="stylesheet" href="hluxbar.css">
The primary HTML structure for the header navigation.
<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>
Set the styles of the header navigation using these CSS classes:
- luxbar-default: default style
- luxbar-static: fit the whole window width
- luxbar-fixed: always visible on page scroll
Change the default color scheme:
- luxbar-menu-light
- luxbar-menu-dark
- luxbar-menu-transparent
- luxbar-menu-material-red
- luxbar-menu-material-indigo
- luxbar-menu-material-cyan
- luxbar-menu-material-green
- luxbar-menu-material-amber
- luxbar-menu-material-brown
- luxbar-menu-material-bluegrey
Set the animation type for the hamburger menu toggle on mobile devices.
- luxbar-hamburger-spin
- luxbar-hamburger-doublespin