Styleguide 0.1.0

11 - Navigation

11.1 - Top-nav

Requires javascript

The primary part of the top-nav is global across all products. Some elements require javascript to work properly. See documentation for sh.libs.topnav.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
  </div>
</header>

11.1.1 - Search

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.seher.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
</header>

11.1.2 - Navigation

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </nav>
  </div>
</header>

11.1.3 - Dropdown

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

11.1.4 - Buttons

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" class="button light small"><span class="icon-Userfemale"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Share"></span></a></li>
        <li><a href="#" class="button light small"><span class="icon-Settings"></span></a></li>
      </ul>
    </div>
  </div>
</header>

11.1.7 - Navigation small screens

(Only visible on small viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="1"/>
        <rect x="0" y="9" width="23" height="1"/>
        <rect x="0" y="18" width="23" height="1"/>
      </svg>
    </a>
  </div>
  <section class="secondary">
  </section>
</header>

11.1.8 - In app

(Only visible on small viewports) Adding is-app will hide the primary navigation.

<a class="button" onclick="$('#top-navigation-inapp-test').topnav('toggleSmallNavigation'); return false;">Demo</a>
<header id="top-navigation-inapp-test" class="top-nav is-app" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">Meny</a>
  </div>
</header>

11.2 - Secondary

Requires javascript

The secondary navigation should be contextual and should reveal links and information that is more relevant to the section or service.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.2.1 - Secondary dropdown

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li class="has-dropdown">
          <a data-dropdown="drop5">Item 2</a>
          <ul id="drop5" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a data-dropdown="drop6">Item 3</a>
          <ul id="drop6" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.3 - Alternate primary

May be used on templates that requires a less intrusive top navigation.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary alternate">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
        <li>
          <a href="#">Item 4</a>
        </li>
      </ul>
    </nav>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.seher.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
    <a class="small-navigation-toggle  hide-for-medium-up" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>

11.4 - Alternate secondary

For placement below top image.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary alternate">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <nav class="left show-for-medium-up">
      <ul class="sections">
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-section">Item 1</a>
          <ul id="drop-section" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
            <li><a href="#">Subitem 5</a></li>
            <li><a href="#">Subitem 6</a></li>
            <li><a href="#">Subitem 7</a></li>
            <li><a href="#">Subitem 8</a></li>
            <li><a href="#">Subitem 9</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a href="#" data-dropdown="drop-video">Item 2</a>
          <ul id="drop-video" class="f-dropdown" data-dropdown-content>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 3</a>
        </li>
        <li>
          <a href="#">Item 4</a>
        </li>
      </ul>
    </nav>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.seher.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
    <a class="small-navigation-toggle  hide-for-medium-up" href="#">
      Meny
      <svg width="23px" height="23px" viewBox="0 0 23 23">
        <rect x="0" y="0" width="23" height="5"/>
        <rect x="0" y="9" width="23" height="5"/>
        <rect x="0" y="18" width="23" height="5"/>
      </svg>
    </a>
  </div>
</header>
<img src="http://placehold.it/1400x700">
<header id="secondary-navigation" class="top-nav" role="banner">
  <section class="secondary alternate">
    <a>
      <img class="logo" src="https://db-styleguide-audunaas.c9users.io/assets/brands/logo-magasinet.png">
    </a>
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li class="has-dropdown">
          <a data-dropdown="drop5">Item 2</a>
          <ul id="drop5" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
            <li><a href="#">Subitem 4</a></li>
          </ul>
        </li>
        <li class="has-dropdown">
          <a data-dropdown="drop6">Item 3</a>
          <ul id="drop6" data-dropdown-content class="f-dropdown">
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
          </ul>
        </li>
        <li><a>Item 4</a></li>
        <li><a>Item 5</a></li>
        <li><a>Item 6</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.4.1 - Expanded

<ul class="tabs expand-3" data-tab>
  <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel2-3">Tab 3</a></li>
</ul>

11.5 - Pagination

<ul class="pagination">
  <li class="arrow unavailable"><a href="" class="icon-Arrow-alt-left"></a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="" class="icon-Arrow-alt-right"></a></li>
</ul>

11.6 - Side nav

<ul class="side-nav">
  <li class="heading">Section</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li class="divider"></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#" class="active">Link 5</a></li>
</ul>

11.7 - Bottom bar

Requires javascript

The secondary navigation should be contextual and should reveal links and information that is more relevant to the section or service.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <nav>
      <ul>
        <li><a>Hjem</a></li>
        <li><a>Hollywood</a></li>
        <li><a>Rød Løper</a></li>
        <li><a>Royal</a></li>
        <li><a>Jan Thomas Mote</a></li>
        <li><a>Sterke Historier</a></li>
        <li><a>Se og hør TV</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>

11.7.1 - Top bar

(Only visible on medium-up viewports)

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <div class="right">
       <ul class="button-group">
         <li><a href="#" class="tiny twitter icon"><span class="icon-Twitter"></span></a></li>
         <li><a href="#" class="tiny facebook icon"><span class="icon-Facebook"></span></a></li>
         <li><a href="#" class="tiny google icon"><span class="icon-Google"></span></a></li>
       </ul>
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.seher.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
</header>

11.8 - Main header

Requires javascript

The secondary navigation should be contextual and should reveal links and information that is more relevant to the section or service.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.seher.no" title="Forsiden">
        <img src="/assets/logo/seher.png">
      </a>
    </h1>
    <div class="right">
       <ul class="button-group">
         <li><a href="#" class="tiny twitter icon"><span class="icon-Twitter"></span></a></li>
         <li><a href="#" class="tiny facebook icon"><span class="icon-Facebook"></span></a></li>
         <li><a href="#" class="tiny google icon"><span class="icon-Google"></span></a></li>
       </ul>
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.seher.no/tekstarkiv/">
        <input type="search" name="q" placeholder="Søk" class="radius" required>
      </form>
    </div>
  </div>
  <section class="secondary">
    <nav>
      <ul>
        <li><a>Hjem</a></li>
        <li><a>Hollywood</a></li>
        <li><a>Rød Løper</a></li>
        <li><a>Royal</a></li>
        <li><a>Jan Thomas Mote</a></li>
        <li><a>Sterke Historier</a></li>
        <li><a>Se og hør TV</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">More</a>
  </section>
</header>