Download this Template

Toggle Navigation

Hidden navigation items expand and contract when clicked on.

 

Sed imperdiet, lectus ut molestie tincidunt, ante felis laoreet metus, eu facilisis tortor pede id quam. Pellentesque lacus tellus, porta ut, gravida non, semper sed, lorem. Vestibulum dui nulla, egestas quis, porta id, posuere a, risus. Suspendisse diam. Aliquam felis sapien, pellentesque non, ultricies ac, hendrerit eu, mi.

680 pixels is the maximum width for a picture in this area.

To add the toggle function to another template page, add the following lines of code to the styles include. It will have a name like head.basic.shtml or head.round.shtml.


<link href="http://www.isu.edu/templates/v1/styles/toggle.css" rel="stylesheet" type="text/css"
media="screen" />
<script type="text/javascript" src="http://www.isu.edu/templates/v1/scripts/slidetoggle.js">
</script> 
	

Adjust the nav include by using the "toggle" and "trigger" classes


<ul class="navlinks">
	<li class="trigger"><a href="#">Link 1</a>
		<ul class="toggle">
			<li><a href="#">Sublink 1</a></li>
			<li><a href="#">Sublink 2</a></li>
			<li><a href="#">Sublink 3</a></li>
		</ul>
	</li>
	<li class="trigger"><a href="#">Link 2</a>
		<ul class="toggle">
			<li><a href="#">Sublink 1</a></li>
			<li><a href="#">Sublink 2</a></li>
			<li><a href="#">Sublink 3</a></li>
		</ul>
	</li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>
	

IDAHO STATE UNIVERSITY

921 South 8th Avenue
Pocatello, Idaho, 83209