Web and Digital Communications

Montana State University
P.O. Box 172220
Bozeman, MT 59717-2220

Director:

Jacob Dolan
jake@montana.edu

Service and Support:

websupport@montana.edu

Step 1:

Add links to the nav flyout stylesheet, jquery library, and the navflyout.js in the header of your file. Place the links directly after the link to print.css.

<link rel="stylesheet" type="text/css" href="/msucommon/stylesv2/print.css" media="print" />    

<link rel="stylesheet" type="text/css" href="/msucommon/stylesv2/navflyout.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="/msucommon/scriptsv2/navflyout.js" type="text/javascript"></script>

Step 2:

Use unordered lists (<ul>) to build your navigation menu. The top menu needs to be given the class "exnav". Currently you may have nested lists 3 deep. You may use multiple unordered lists (<ul>) with the class "exnav".

<ul class="exnav">
 <li><a href=""><strong>No Sub menu</strong></a></li>
 <li><strong>Just Text</strong></li>
 <li><a href=""><strong>Expandable Menu 1</strong></a>
  <ul>
   <li><a href="">Expandable Sub Menu</a>
    <ul>
     <li><a href="">Link</a></li>
     <li><a href="">Link</a></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

<ul class="exnav">
 <li><a>Expandable Non-Link</a>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </li>
</ul>

Examples:

See the navigation bar on the left as an example.

Known Incompatibilities:

Please add the following script to your header for IE6 compatibility:

<!--[if IE 6]> 
<script type="text/javascript">

$(document).ready(function() {
   $(".exnav li:has(a)").hover(
      function () {
        $(this).addClass("over");
      },
      function () {
        $(this).removeClass("over");
      }
   );
});
</script>
<![endif]-->