Navigation Menus Compilation
Within the various examples shone below, I have not included any code to show the current page that your on. If you would like to add that funtionality to any these examples, or any of your own menus for that matter, just follow these simple directions!
Note: with many navigation menus you need to float the <li> and the <a> in order to get things to line up correctly cross browser. But an often-sited drawback of using floats is that there is no easy way to center them. Most people settle by using a fixed width wrapper that contains the float (or floats). The width of the wrapper must match the float(s) total width and then the wrapper can simply be centered using auto margins. This will effectively center the floated elements as they are now contained within the wrapper. The drawback of this method is that you will need to know the width of the floated content beforehand. So, with that said, there is another, and often times prefered method to center a floated navigation menu. To center a widthless float, read and do this!
- Nav 1
- Nav 2
- Nav 3
- Nav 4
- Nav 5
- Nav 6
- Nav 7
- Nav 8
- Nav 9
- Nav 10
- Nav 11
- Nav 12
- Nav 13
- Nav 14
- Nav 15
- Nav 16
- Nav 17
- Nav 18
- Nav 19
- Nav 20
