Simple Nav 4.0

What Is SimpleNav?

Simple Nav is a CSS and jQuery full width navigation system.

A New Approach To Full Width

In older versions of simpleNav I was using jQuery to calculate and add padding to the menu items so that the menu would span the full width of the container but in some browsers (IE) there were circumstances where the last item would still wrap down to the next line. In version 4.0 I’m setting the width of each menu item which will limit the odds of certain browsers (IE) from breaking. It also allows you to change font size or weight on hover without breaking your site.

A New Feature

A new option in version 4.0 is edge2edge allows the menu system to work similiar to justified text meaning that the the first menu item will be on the left edge and the last item will be on the right edge of the parent container.


These are the options and the default values you can use with SimpleNav:

fx – (‘slide’,’fade’,’none’) – This option sets the effect to use on the drop down. Default value is ‘slide’.

speed – (value) – This is the speed of the transition used for the drop down in ms. Default value is 500.

full – (true,false) – This tells simpleNav if you want the nav to span the full width of the parent or not. Default value is true

edge2edge – (true,false) – If set to true the menu will span edge to edge of the parent. full must also be set to true. Default value is false


Include the js and css file:

<script type="text/javascript" src="simplenav3.js"></script>
<link href="simplenav3.css" rel="stylesheet" type="text/css" />

Code the Menu in an unordered list:

      <li><a href="index.php">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Store</a></li>

Put this in the head section of the site:

    /* Simplenavav */
    $(document).ready(function() {
            full: true,
            fx: 'slide',
            speed: 500,
            edge2edge: true

You can view the demo here and get the source on github.