EverWeb Codebox

Flyout Vertical Navigation

A flyout, vertical two level navigation is sometimes preferred from the design point of view and for visitor convenience.

This one has been made as simple as possible and has had the HTMLShiv and some javascript added in conditional comments for those who want to support out of date browsers like IE V 7 & 8.

Code

The HTML and CSS are shown below and are commented so no further explanation should be necessary. The conditional Javascript is dealt with further down the page.

Check out the Code Insertion page to find out where to paste the various sections of code.

CSS

<style type="text/css">

#flyout nav{margin:0;padding:0;display:block;position:relative;z-index:100}

#flyout ul, #menuwrapper ul li{margin:0;padding:0; list-style:none}

/* Background color, separator color, font family & size */

#flyout ul li{

background:#000000;

border-bottom:solid 1px #CCCCCC;

font:15px helvetican, sans-serif;

}

/* Remove separator from last list item */

#flyout ul li:last-child{border:none;

}

/* Menu width */

#flyout ul li{display:block;width:150px;

}

/* Hover background color */

#flyout ul li:hover, #menuwrapper ul li.iehover{background:#444444;position:relative;

}

/* Link styles */

#flyout ul li a{

width:80%;

padding:5px 15px;

color:#FFFFFF;

display:inline-block;text-decoration:none;cursor:pointer;

}

/**** SECOND LEVEL MENU ****/

#flyout ul li ul{position:absolute;display:none;

}

/* the value for left must be the same as the menu width */

#flyout ul li:hover ul, #menuwrapper ul li.iehover ul{

left:150px;

top:0px;

display:block;

}

/* 2nd level background color */

#flyout ul li ul li{background-color:#444444;

}

/* 2nd level background hover color */

#flyout ul li:hover ul li:hover, #menuwrapper ul li.iehover ul li.iehover{background-color:#000000;

}

/* Level 2 link color */

#flyout ul li ul li a{color:#FFFFFF;display:inline-block;width:80%;}

</style>

HTML

<nav id="flyout">

<ul>

<!-- single level item -->

<li><a href="#">Flyout Navigation</a></li>

<!-- dropdown -->

<li><a href="#">Products</a>

     <ul>

          <li><a href="#">Product 1</a></li>

          <li><a href="#">Product 2</a></li>

             <li><a href="#">Product 3</a></li>

             <li><a href="#">Product 4</a></li>

             <li><a href="#">Product 5</a></li>

              <li><a href="#">Product 6</a></li>

     </ul>

</li>

<!-- dropdown -->

<li><a href="#">Info</a>

      <ul>

             <li><a href="#">Company</a></li>

             <li><a href="#">Location</a></li>

             <li><a href="#">Stockists</a></li>

     </ul>

</li>

<!-- single level item -->

<li><a href="#">Contact</a>

</ul>

</nav>

NOTE A: Make sure the menu width is entered in both places in the styles - marked in red.


NOTE B: Before publishing the page, use the Arrange menu to bring the navigation to the front so that the flyout will appear above any of the other content items.

Javascript

When viewed on a tablet such as an iPad, hover drop down menus don't play nice since they open with a click and refuse to close until the page is refreshed.

To over come this, download the doubleTapToGo file and drag it into Assets.

Now insert the following into the Site Wide Head Code box...

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/doubletaptogo.min.js"></script>

<script type="text/javascript">

$( function(){$( '#flyout li:has(ul)' ).doubleTapToGo();});

</script>


This part is only required to support older versions of Internet Explorer - 6, 7 & 8.


Download the HTML5Shiv and drag it into the Assets column. Right click it and copy the relative file path. Paste this into the code where marked in blue.


<!--[if lt IE 9]><script src="{!-ASSETSPATH-!}External%20Files/html5shiv.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#flyout ul li").mouseover(function(e) {$(this).addClass(" iehover ");});

$("#flyout ul li").mouseout(function(e) {$(this).removeClass(" iehover ");});

});

</script><![endif]-->


Paste the above code into the Head Code box after the CSS.