Web and Digital Communications

Step 1:

Add a link to the style sheet in the header of your file. Place the link directly after the link to screen.css.

<link rel="stylesheet" type="text/css" href="http://www.montana.edu/msucommon/stylesv2/screen.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.montana.edu/msucommon/stylesv2/navtoggle.css" media="screen" />

Step 2:

Add links to the jquery1.4.1.js and the navtoggle.js in the header of your file. Place the links directly after the link to print.css.

<link rel="stylesheet" type="text/css" href="http://www.montana.edu/msucommon/stylesv2/print.css" media="print" />    
<script src="http://www.montana.edu/msucommon/scriptsv2/jquery1.4.1.js" type="text/javascript"></script>
<script src="http://www.montana.edu/msucommon/scriptsv2/navtoggle.js" type="text/javascript"></script>

Step 3:

Use unordered lists (<ul>) to build your navigation menu. The top menu needs to be given the class "exnav". You may have just a single nested list. You may use multiple unordered lists (<ul>) with the class "exnav".

<h2>Link Title 1</h2>

<ul class="exnav">
 <li><a href=""><strong>Bolded No Sub menu</strong></a></li>
 <li><a href="">Sub menu</a></li>
 <li><strong>Just Bolded Text</strong></li>
 <li><a href=""><strong>Expandable Bolded Menu 1</strong></a>
   <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
   </ul>
 </li>
 <li>No link
   <ul>
      <li><a href="">Very very long long link link two lines</a></li>
      <li><a href="">Expandable Sub Menu</a></li>
   </ul>
 </li>
 <li><a href="">No Sub menu</a></li>
 <li>Just Text</li>
</ul>

Examples:

See the navigation bar on the left as an example.

Variants:

On pages that you want a specific menu to be open when the page loads, you can add a class "togopen" to the list item (<li>) containing the unordered list (<ul>) that needs to be expanded.

 <li class="togopen"><a href="#asdf">Expandable OPENED Menu</a>
  <ul> 
   <li><a href="asdf">Link</a></li> 
   <li><a href="qwer">Link</a></li> 
  </ul> 
 </li>

Known Incompatibilities:

IE6: Toggle navigation continues to work. However, lists topped by links instead of plain text will not open.

Link Title 1

Link Title 2

Director: