Header

The header navigation must be included inside the header tag and the nav tag. The header navigation has 3 breakpoints.

  • 960 and more
  • 720 to 960
  • 720 and below
  <header>
    <nav>
      <!-- Enter the Header nav code here -->
    </nav>
  </header>
      

1-A Global Navigation

<div class="primary-nav light" id="primary">
  <div class="row top-nav">
    <div class="marged_tablet padded_tablet clearfix">
      <a href="#" class="logo menu-close">
        <span class="icon-logo"></span>
        <span class="icon-wordmark"></span>
        <span class="placeholder">Academy of Art University - Founded in San Francisco in 1929</span>
      </a>
      <div class="search hidden_tablet menu-open-inline">
        <input type="text" data-aau="searchfield" value="" placeholder="Begin typing to search"/>
      </div>
      <ul class="nav-icon hidden_tablet">
        <li data-aau="menutoggle" data-target="#baseline"><a href="#" class="icon-user"></a></li>
        <li data-aau="menutoggle" data-target="#primary">
          <a href="#" class="icon-menu menu-close"></a>
          <a href="#" class="icon-close menu-open"></a>
        </li>
      </ul>
      <ul class="nav hidden_small visible_tablet">
        <li class="active"><a href="visual-style-guide/basics/">Parents</a></li>
        <li><a href="technical-guide/">Alumni</a></li>
        <li><a href="technical-guide/">Industry</a></li>
        <li data-aau="searchbtn"><a href="#"><span class="icon-search"></span> Search</a></li>
        <li data-aau="loginbtn"><a href="#"><span class="icon-user"></span> Login</a></li>
      </ul>
    </div>
  </div>
  <div class="row middle-nav menu-open">
    <div class="marged_tablet padded_tablet">
      <ul class="nav">
        <li class="active"><a href="who-we-are/">Academics</a></li>
        <li><a href="copy-style-guide/">Admissions</a></li>
        <li class="active"><a href="visual-style-guide/basics/">Students</a></li>
        <li><a href="technical-guide/">News and Event</a></li>
        <li><a href="technical-guide/">About</a></li>
      </ul>
      <a data-aau="overlaybtn" data-url="ajax/request-informations" class="btn btn-standard float-right_tablet hidden_small inline_tablet">Request Information</a>
    </div>
  </div>
  <div class="row bottom-nav menu-open hidden_tablet">
    <p class="label"><em>Information For</em></p>
    <ul class="nav">
      <li class="active"><a href="visual-style-guide/basics/">Parents</a></li>
      <li><a href="technical-guide/">Alumni</a></li>
      <li><a href="technical-guide/">Industry</a></li>
    </ul>
    <a class="nav-btn" data-aau="overlaybtn" data-url="ajax/request-informations">Request Information</a>
  </div>
</div>

1-B Sub Navigation

<div class="header-content">
  <div class="row">
    <div class="marged padded">
      <ol class="breadcrumb">
        <li><a href="#">Root Level</a></li>
        <li><a href="#">First Level</a></li>
      </ol>
    </div>
  </div>
  <div class="row">
    <div class="columns tablet-6">
      <div class="marged padded">
        <h1>Page Title</h1>
      </div>
    </div>
    <div class="columns tablet-6">
      <div class="marged padded">
        <p class="muted">Descriptive paragraph pertaining to this page goes here. In, ultrices aliquam. Convallis wisi Mauris pharetra Etiam mauris facilisi montes senectus! Mi! Porttitor pretium aptent interdum. Praesent Etiam ornare, adipiscing primis laoreet habitasse sociis! Nascetur massa.</p>
        <a href="#" class="btn-icon icon-facebook"></a>
        <a href="#" class="btn-icon icon-twitter"></a>
        <a href="#" class="btn-icon icon-pinterest"></a>
        <a href="#" class="btn-icon icon-google"></a>
        <a href="#" class="btn-icon icon-tumblr"></a>
        <a href="#" class="btn-icon icon-vimeo"></a>
        <a href="#" class="btn btn-standard float-right_tablet">Request Information</a>
      </div>
    </div>
  </div>
</div>
<div class="secondary-nav marged_small unmarged_tablet" id="secondary" data-aau="backscroll">
  <div class="row">
    <div class="marged_tablet padded_tablet">
      <a href="javascript:void(0);" class="logo visible-sticky"><span class="icon-logo"></span></a>
      <a href="javascript:void(0);" class="btn-icon icon-backtotop float-right_small visible-sticky"></a>
      <a data-aau="overlaybtn" data-url="http://example.com/ajax/request-informations" class="btn btn-standard float-right_tablet">Request Information</a>
      <a class="title" data-aau="menutoggle" data-target="#secondary">Page Title</a>
      <a class="option" data-aau="menutoggle" data-target="#secondary">Select an Option</a>
      <ul class="nav menu-open">
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
        <li><a href="#">Sub-nav Link</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="spacing"></div>

1-C Backscroll Plugin

Backscroll allows an element to disappear when scrolling down and then appear when scrolling back up.

Options

Name Type Default Required Description Example
data-hide-delay Number 0 no Delay without scrolling before auto-hiding the element. If the value is 0, there is no auto-hide. 3000

Methods

Name Parameter Description Example Live demo
show Show the element $('#navbar-backscroll').backscroll('show')
hide Hide the element $('#navbar-backscroll').backscroll('hide')

Usage with HTML attribute

<div class="navbar" data-aau="backscroll" data-hide-delay="3000">...</div>

Usage with Javascript

(function($){
  $('#navbar-backscroll').backscroll({
    hideDelay: 3000
  });
})(jQuery);

Live Example

The sub navigation on the top of these pages uses Backscroll.

1-D Footer

<footer class="dark">
  <div class="row">
    <div class="column tablet-9">
      <div class="marged padded">
        <a href="#" class="logo menu-close">
          <span class="icon-logo"></span>
          <span aria-hidden="true" class="icon-wordmark"></span>
        </a>
      </div>
    </div>
    <div class="column tablet-2">
      <div class="marged_tablet padded_tablet">
        <a data-aau="overlaybtn" data-url="http://example.com/ajax/request-informations" class="btn btn-standard float-right_tablet hidden_small inline_tablet">Request Information</a>
        <a data-aau="overlaybtn" data-url="http://example.com/ajax/request-informations" class="nav-btn hidden_tablet">Request Information</a>
      </div>
    </div>
    <div class="column tablet-1">
      <div class="marged padded">
        <a href="javascript:void(0);" class="btn-icon icon-backtotop float-right_tablet hidden_small inline_tablet"></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="column tablet-3">
      <div class="marged padded">
        <p>1.800.544.2787<br/>
        79 New Montgomery St.<br/>
        San Francisco, CA 94105<br/>
        <a href="#">Get directions</a></p>
      </div>
    </div>
    <div class="column small-6 tablet-3">
      <div class="marged padded">
        <ul>
          <li><a href="#">Campus Map</a></li>
          <li><a href="#">Directories</a></li>
          <li><a href="#">Acreditation</a></li>
          <li><a href="#">Accessibility</a></li>
        </ul>
      </div>
    </div>
    <div class="column small-6 tablet-3">
      <div class="marged padded">
        <ul>
          <li><a href="#">Site Maps</a></li>
          <li><a href="#">Campus Safety</a></li>
          <li><a href="#">Privacy & Term</a></li>
          <li><a href="#">Jobs</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="hr"><hr/></div>
  <div class="row">
    <div class="column tablet-8">
      <div class="marged padded">
        <a href="javascript:void(0);" class="btn-icon icon-facebook"></a>
        <a href="javascript:void(0);" class="btn-icon icon-twitter"></a>
        <a href="javascript:void(0);" class="btn-icon icon-youtube"></a>
        <a href="javascript:void(0);" class="btn-icon icon-backtotop float-right_small hidden_tablet"></a>
      </div>
    </div>
    <div class="column tablet-4">
      <div class="marged padded">
        <p class="small muted float-right_tablet">© 2013 Academy of Art University</p>
      </div>
    </div>
  </div>
</footer>

Sign In