Pattern Lab

Primary Nav

More

HTML

									
										<div class="navWrap" id="navWrap">	
	<nav class="navMain">
		<ul>
			<li><a href="#"><span>Academics</span></a></li>
			<li><a href="#"><span>Campus Life</span></a></li>
			<li><a href="#"><span>Admissions</span></a></li>
		</ul>
	</nav>
	
	<a href="#" class="mobiMore mobiClosed" id="mobiMore">More</a>
			
	<nav class="navTert" id="navTert">
		<ul>
			<li><a href="#"><span>Who We Are</span></a></li>
			<li><a href="#"><span>Offices</span></a></li>
			<li><a href="#"><span>Employment</span></a></li>
			<li><a href="#"><span>Griffin&rsquo;s Lair</span></a></li>
			<li><a href="#"><span>Alumni</span></a></li>
		</ul>
	</nav>
	
	<div class="icon-searchToggle" id="searchToggle"></div>
	<div class="searchWrap" id="searchWrap">				
		<form action="/" method="post" class="searchForm">
			<fieldset class="group">
				<legend class="vh">Search</legend>
				<input type="text" placeholder="Search SetonHill.edu" >
				<button class="submit ir">Submit</button>
			</fieldset>				
		</form>			
	</div>							
</div><!-- navWrap -->

Footer Nav

HTML

									
										<div class="footerNav">
	<ul>
		<li><a href="#">Who We Are</a></li>
		<li><a href="#">Offices</a></li>
		<li><a href="#">Employment</a></li>
		<li><a href="#">Griffin&rsquo;s Lair</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>		
</div>

Breadcrumbs

HTML

									
										<ul class="breadcrumbs">
	<li><a href="#">Grandparent</a></li>
	<li><a href="#">Parent</a></li>
	<li><a href="#">Child</a></li>
	<li><a href="#">Grandchild</a></li>
	<li><a href="#">Great-Grandchild</a></li>
</ul>

Sub Nav

In this section

HTML

									
										<div class="subNavContain">	
							
	<div class="subNavHead" id="subNavHead">
		<a href="#">In this section</a>
	</div>
	
	<ul class="subNav" id="subnav">					
		<li><a href="#">Business</a></li>
		<li><a href="#">Education</a></li>
		<li><a href="#">Language, Culture &amp; Communication</a></li>
		<li><a href="#">Political Science &amp; Law</a></li>
		<li><a href="#">Theology &amp; Philosophy</a></li>
		<li><a href="#">Science &amp; Engineering</a></li>
		<li><a href="#">Health Sciences</a></li>
		<li><a href="#">Social Sciences</a></li>
		<li><a href="#">Visual Arts</a></li>
		<li><a href="#">Performing Arts</a></li>					
	</ul>	
			
</div><!-- subNavContain -->

Mega Buttons

HTML

									
										<div class="blockList megaButtons">			
	<ul>
		<li><a href="#">Undergraduate Open Houses</a></li>
		<li><a href="#">Graduate Info Sessions</a></li>
		<li><a href="#">Adult Degree Info Sessions</a></li>
	</ul>		
</div>

Line Navigation

All Faculty
Division Chairs
Program Directors
Adjunct Faculty
Community Arts Program Instructors

HTML

									
										<div class="lineNav" id="facultySort">			
	<ul>
		<li><span data-filter="*" class="active" tabindex="0">All Faculty</span></li>
		<li><span data-filter=".divisionChairs" tabindex="0">Division Chairs</span></li>
		<li><span data-filter=".programDirectors" tabindex="0">Program Directors</span></li>					
		<li><span data-filter=".adjunctFaculty" tabindex="0">Adjunct Faculty</span></li>
		<li><span data-filter=".communityArts" tabindex="0">Community Arts Program Instructors</span></li>	
	</ul>			
</div>