HTML
<div class="header-container">
<div class="nav-elements-container">
<!-- <quick-nav> -->
<nav id="header" class="quick-nav clearfix" data-search-style="default">
<div class="quick-nav-wrapper">
<ul class="no-pad-wrapper border-box clearfix no-bullets">
<li>
<a href="http://www.library.stonybrook.edu/" class="clearfix">
<span class="label clearfix">Libraries</span>
</a>
</li>
<li>
<a href="http://www.stonybrook.edu/sb/calendars.shtml" class="clearfix">
<span class="label clearfix">Calendar<span class="hide-accessible-540">s</span></span>
</a>
</li>
<li>
<a href="http://www.stonybrook.edu/newsroom">
<span class="label clearfix">News<span class="hide-accessible-540">room</span></span>
</a>
</li>
<li class="tablet mobile desktop">
<a href="http://www.stonybrook.edu/sb/directories.shtml">
<span class="label clearfix">Directory</span>
</a>
</li>
<li>
<a href="http://it.stonybrook.edu/services/solar/">
<span class="label clearfix">Solar</span>
</a>
</li>
<li class="tablet mobile">
<a href="http://www.stonybrook.edu/mycloud/">
<span class="label clearfix">Email</span>
</a>
</li>
<li>
<span class="more-trigger">
<span class="label clearfix"><i class="icon sbuicon-caret-right clearfix"></i>More<span class="extra-label"> Links</span><span class="extra-label-mobile">...</span></span>
</span>
</li>
<!--<li class="desktop for-info">
<span class="audience-trigger">
<i class="icon fa fa-ellipsis-h clearfix"></i>
<span class="label clearfix"><i class="icon sbuicon-caret-right clearfix"></i>Info for</span>
</span>
</li>-->
</ul>
</div>
</nav>
<!-- </quick-nav> -->
<!-- <more-nav> -->
<nav class="more-nav-v3 hide-accessible clearfix">
<div class="wrapper more-nav-v3-wrapper">
<div class="more-nav-v3-col">
<strong>Info For</strong>
<ul class="border-box clearfix">
<li class="clearfix">
<a href="http://www.stonybrook.edu/for-students/" class="clearfix">Students</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/faculty-staff/" class="clearfix">Faculty & Staff</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/alumni.shtml" class="clearfix">Alumni & Friends</a>
</li>
<li class="clearfix">
<a href="http://mobile.cc.stonybrook.edu/sb/undergraduate-admissions/parents/" class="clearfix">Parents</a>
</li>
<li class="clearfix">
<a href="http://mobile.cc.stonybrook.edu/sb/community-relations/" class="clearfix">Neighbors</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/economic-development/" class="clearfix">Economic Development</a>
</li>
<li class="clearfix">
<a href="http://sb.cc.stonybrook.edu/news/media_relations/reporters_toolkit.php" class="clearfix">Media</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/arts" class="clearfix">Arts & Culture</a>
</li>
</ul>
</div>
<div class="more-nav-v3-col">
<strong>Find</strong>
<ul class="border-box clearfix">
<li class="clearfix">
<a href="http://www.stonybrook.edu/search/people/" class="clearfix">People Directory</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/a-z.shtml" class="clearfix">A-Z Web Directory</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/calendars.shtml" class="clearfix">Calendars</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/maps.shtml" class="clearfix">Campus Maps</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/directions.shtml" class="clearfix">Directions</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/parking/" class="clearfix">Parking</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/majors.shtml" class="clearfix">Majors & Minors</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/jobs/" class="clearfix">Jobs</a>
</li>
</ul>
</div>
<div class="more-nav-v3-col">
<strong>Shortcuts</strong>
<ul class="border-box clearfix">
<li class="clearfix">
<a href="http://library.stonybrook.edu/" class="clearfix">Libraries</a>
</li>
<li class="clearfix">
<a href="http://it.stonybrook.edu/services/solar" class="clearfix">Solar</a>
</li>
<li class="clearfix">
<a href="http://blackboard.stonybrook.edu/" class="clearfix">Blackboard</a>
</li>
<li class="clearfix">
<a href="http://stonybrook.edu/mycloud" class="clearfix">Google Apps</a>
</li>
<li class="clearfix">
<a href="stonybrook.edu/medicine-webmail/" class="clearfix">Medicine Email</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/brand" class="clearfix">Brand Toolkit</a>
</li>
<li class="clearfix">
<a href="http://it.stonybrook.edu/it-system-status" class="clearfix">IT System Status</a>
</li>
<li class="clearfix">
<a href="http://stonybrook.edu/happenings" class="clearfix">Happenings</a>
</li>
</ul>
</div>
<div class="more-nav-v3-col">
<strong>Offices & Services</strong>
<ul class="border-box clearfix">
<li class="clearfix">
<a href="http://stonybrook.edu/bursar/" class="clearfix">Bursar</a>
</li>
<li class="clearfix">
<a href="http://stonybrook.edu/campus-safety/" class="clearfix">Campus Safety</a>
</li>
<li class="clearfix">
<a href="http://career.stonybrook.edu/" class="clearfix">Career Center</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/hr/" class="clearfix">Human Resources</a>
</li>
<li class="clearfix">
<a href="http://it.stonybrook.edu/" class="clearfix">IT Services</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/registrar/" class="clearfix">Registrar</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/pres/" class="clearfix">Office of the President</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- </more-nav> -->
<!-- <audience-nav> -->
<!-- </audience-nav> -->
</div>
<!-- <logo-container> -->
<div class="logo-container page-cat-main clearfix border-box">
<header class="no-pad-wrapper">
<div class="logo-wrapper">
<div class="logo">
<a href="http://www.stonybrook.edu/"><img src="//mobile.cc.stonybrook.edu/sb/img/branding/logo/sbu/primary/300/stony-brook-university-logo-horizontal-300.png" title="Stony Brook University"></a>
</div>
<div class="site-tagline">The State University of <span>New York</span></div>
</div>
</header>
</div>
<!-- </logo-container> -->
</div>
<div class="main-nav-container clearfix">
<!-- <site-nav> -->
<nav class="site-nav default border-box clearfix">
<div class="no-pad-wrapper clearfix">
<div class="menu-trigger border-box clearfix"><i class="icon sbuicon-bars"></i></div>
<ul class="main-nav-list border-box clearfix hide-accessible-mobile" style="display: block;">
<li class="clearfix home">
<a href="http://www.stonybrook.edu/" class="clearfix">
<span class="label clearfix"><i class="sbuicon-home"><span class="hide-accessible">Home</span></i>
</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/about" class="clearfix">
<span class="label clearfix">About</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/sb/far-beyond/admissions" class="clearfix">
<span class="label clearfix">Admissions</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/academics" class="clearfix">
<span class="label clearfix">Academics</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/research/" class="clearfix">
<span class="label clearfix">Research</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/athletics/" class="clearfix">
<span class="label clearfix">Athletics</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrookmedicine.edu/" class="clearfix">
<span class="label clearfix">Medicine</span>
</a>
</li>
<li class="clearfix">
<a href="http://www.stonybrook.edu/giving/" class="clearfix">
<span class="label clearfix">Giving</span>
</a>
</li>
</ul>
<div class="search-container default clearfix border-box" style="top: -127px;">
<form class="search-wrapper" action="http://stonybrook.edu/search">
<input type="text" id="search-form-query1" name="q" title="Search" value="" class="populate" size="30" placeholder="Search SBU">
<button name="submit" type="submit" class="btn btn-success" id="search-form-submit1" alt="Do search">
<i class="icon sbuicon-search2"></i>
</button>
</form>
</div>
</div>
<div class="clearfix campaign-badge">
<a href="http://www.stonybrook.edu/campaign" class="arrow-after">
<span class="label hide-accessible clearfix">The Campaign for Stony Brook</span>
<img src="http://www.stonybrook.edu/sb/far-beyond/img/branding/logo/campaign-lockup-two-line-358-60.png" alt="The Campaign for Stony Brook logo">
<div class="join-us"><span class="arrow-after">Join us!</span></div>
</a>
</div>
</nav>
<!-- </site-nav> -->
</div>
<script>
$('.menu-trigger').on('click', function(event) {
$(this).toggleClass('selected');
var icon = $(this).find('.icon');
$mainNavList = $('.main-nav-list');
if ($mainNavList.hasClass('open')) {
icon.removeClass('sbuicon-close');
icon.addClass('sbuicon-bars');
$mainNavList.fadeIn(0, function() {
$mainNavList.removeClass('open')
.slideUp('fast', function() {
$mainNavList.addClass('hide-accessible-mobile').fadeIn('fast');
});
});
} else {
icon.removeClass('sbuicon-bars');
icon.addClass('sbuicon-close');
$mainNavList.fadeOut(0, function() {
$mainNavList.removeClass('hide-accessible-mobile').addClass('open')
.slideDown('fast');
});
}
});
// section subnav
$('.section-nav-trigger a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('active');
$sectionNav = $(this).parent().next('.section-nav');
if($sectionNav.hasClass('open')) {
$sectionNav.fadeIn(0,function(){
$sectionNav.removeClass('open')
.slideUp('fast',function() {
$sectionNav.addClass('hide-accessible-mobile-960').fadeIn('fast');
});
});
} else {
$sectionNav.fadeOut(0,function(){
$sectionNav.removeClass('hide-accessible-mobile-960').addClass('open')
.slideDown('fast');
});
}
});
// Get the text of the currently selected section nav and update the dropdown
if($('.section-nav .selected').length) {
$('.section-nav-trigger a').text($('.section-nav .selected').text());
}
$('input[type="text"]').on('focus',function() {
$(this).addClass('focus');
}).on('focusout',function() {
if($(this).val().length == 0) {
$(this).removeClass('focus');
}
});
$('.search-container button').on('click',function(event) {
var inputEl = $(this).closest('.search-container').find('input');
if($(inputEl).val().length == 0) {
event.preventDefault();
inputEl.focus();
} else {
if(!($(inputEl).hasClass('vasearch'))) {
var queryString = inputEl.val();
var searchUrl = "http://www.stonybrook.edu/search/?q="+queryString;
event.preventDefault();
event.stopPropagation();
inputEl.val('').focusout();
window.open(searchUrl, '_self');
}
}
});
$('.search-container input').keypress(function(event) {
if (event.keyCode == 13) {
var inputEl = $(this);
if($(inputEl).val().length == 0) {
event.preventDefault();
inputEl.focus();
} else {
if(!($(inputEl).hasClass('vasearch'))) {
var queryString = inputEl.val();
var searchUrl = "http://www.stonybrook.edu/search/?q="+queryString;
event.preventDefault();
event.stopPropagation();
inputEl.val('').focusout();
window.open(searchUrl, '_self');
}
}
}
});
</script>