/ Menu

Featherweight, Responsive, CSS Only Navigation Bar

Featherweight, Responsive, CSS Only Navigation Bar

Luxbar

Featherweight, Responsive, CSS Only Navigation Bar

Then customize the look of it (color, menu alignement, etc) with the options below. The navbar will update realtime accordingly. After everything looks the way you want, grab the generated HTML code from the bottom and drop it into your project.

Luxbar

Generated Code:

<header id="luxbar" classNameN="luxbar-fixed">
    <input type="checkbox" id="luxbar-checkbox"/>
    <div className="luxbar-menu luxbar-menu-right luxbar-menu-material-green">
        <ul className="luxbar-navigation">
            <li className="luxbar-header">
                <a href="#" classN="luxbar-brand">LUXBAR</a>
                <label className="luxbar-hamburger luxbar-hamburger-doublespin" 
                id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label>
            </li>
            <li class="luxbar-item"><a href="#">Item 1</a></li>
            <li class="luxbar-item"><a href="#">Item 3</a></li>
            <li class="luxbar-item"><a href="#">Item 4</a></li>
        </ul>
    </div>
</header>

GitHub

CodeTea

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More