#responsive nav

This was so frustrating, I wanted to cry. I took about 2 full days wondering why my collapsed bar wouldn't "fully display itself" if the window was maxed out. I messed around with a lot of class conditionals, and I finally am getting somewhere, but it's been hazy and I don't remember why some of the things I chose to do worked, so I have to piece it together again in here.

New Post has been published on http://www.htmluse.com/responsive-simple-nav/

Responsive Simple Nav

Download   Demo

Responsive Simple Nav is a super small customizable responsive Navigation for jQuery & Zepto

Features

Super small (2KB) = super fast

Calculates automatic breakpoint

Possible to define manual breakpoint is easy

Define dropdown (togglespeed) speed for own taste

Easy to define the markup output for your dropdown button

Possible to ‘tab’ through = accessibility friendly

Makes you happy because it gives you what you need (and not more)

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="css/nav.css"> <!--- don't forget to use jQuery or Zepto.js --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--- Insert Script --> <script src="js/navbar.min.js"></script>

2. HTML

<nav> <!--- Put class 'navbar' to your list --> <ul class="navbar"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> </ul> </nav>

3. JAVASCRIPT