Seventh-Day Adventist Church

International Website Framework

Menu

Navigation

There are a handful of different navigation schemes you can use from the main navigation down to the simple sub navigation.

Main Navigation

The code example below is the very navigation used on this page. Take note of the class="active" to instantiate an active state on a nav element.

Example:

<header>
  <nav>
    <div class="nav" id="nav-templates">
      <a href="/local/templates/">Templates</a>
      <ul>
        <li><a href="/local/templates/#homepage">Homepage</a></li>
        <li><a href="/local/templates/#content-right">Sub Page - Content Right</a></li>
        <li><a href="/local/templates/#content-left">Sub Page - Content Left</a></li>
      </ul>
    </div>
    <div class="nav" id="nav-feature">
      <a href="/local/layout/">Layout</a>
      <ul>
        <li><a href="/local/layout/#full-width">Full Width</a></li>
        <li><a href="/local/layout/#two-thirds-left">Two Thirds Left</a></li>
        <li><a href="/local/layout/#two-thirds-right">Two Thirds Right</a></li>
      </ul>
    </div>
    <div class="nav active" id="nav-nav">
      <a href="/local/navigation/">Navigation</a>
      <ul>
        <li><a href="/local/navigation/#main-nav">Main Navigation</a></li>
        <li><a href="/local/navigation/#main-nav-side">Main Navigation on Side</a></li>
        <li><a href="/local/navigation/#sub-navigation">Sub Navigation</a></li>
      </ul>
    </div>
    <div class="nav" id="nav-feature">
      <a href="/local/modules/">Modules</a>
      <ul>
        <li><a href="/local/modules/#full-width-hero">Full Width Hero</a></li>
        <li><a href="/local/modules/#slideshow">Slideshow</a></li>
        <li><a href="/local/modules/#split-callout">Split Callout</a></li>
        <li><a href="/local/modules/#thirds-callout">Thirds Callout</a></li>
        <li><a href="/local/modules/#sermon-listing">Sermon/Podcast Listing</a></li>
        <li><a href="/local/modules/#category-listing">Blog Archive/Category Listing</a></li>
        <li><a href="/local/modules/#cta-links">Call to Action Links</a></li>
    </ul>
    </div>
    <div class="nav" id="nav-typography">
      <a href="/local/typography/">Typography</a>
      <ul>
        <li><a href="/local/typography/#headings">Headings</a></li>
        <li><a href="/local/typography/#body-copy">Body Copy</a></li>
        <li><a href="/local/typography/#links-buttons">Links & Buttons</a></li>
      </ul>
    </div>
  </nav>
</header>

Main Navigation on Side

To move a main navigation to the side, simply add a class="side-nav" to your nav element.

Example:

<header>
  <nav class="side-nav">
    ...
  </nav>
</header>

Sub Navigation

It is important to note that a page with sub navigation has to include the sub navigation twice. This is because we can not repurpose the original sub navigation for use on a mobile device, so we need to include a seperate mobile sub nav on the page.

The mobile sub navigation should come after the #title and before the #content elements.

Example:

<div id="title">...</div>
<ul id="mobile-sub-nav">
  <li><a href="#">About Sligo</a></li>
  <li><a href="#">Pastors</a></li>
  <li><a href="#">Staff</a></li>
</ul>
<div id="content">...</div>

The main sub navigation can live inside the #content element.

<div id="content">
  <ul id="sub-nav">
    <li><a href="#">About Sligo</a></li>
    <li><a href="#" class="active">Pastors</a></li>
    <li><a href="#">Staff</a></li>
  </ul>
</ul>