styleguide 0.30.11

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 db.libs.topnav.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <div class="right">
      <form id="search" name="search" method="get" class="search show-for-medium-up" action="http://www.dagbladet.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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.5 - User login

Global login. Note that the template for the login is rendered in the client in the placeholder #js-user.

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <div class="right">
      <ul class="button-group radius">
        <li><a href="#" data-dropdown="js-user" class="button light small">Logg inn</a></li>
      </ul>
    </div>
  </div>
  <div id="js-user" data-dropdown-content class="f-dropdown small content user-login"></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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
    <a class="small-navigation-toggle" href="#">
      <svg width="30px" height="30px" viewBox="0 0 30 30">
        <rect x="0" y="0" width="30" height="2"/>
        <rect x="0" y="10" width="30" height="2"/>
        <rect x="0" y="10" width="30" height="2"/>
        <rect x="0" y="20" width="30" height="2"/>
      </svg>
    </a>
  </div>
</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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <h1>
      <a>
        <div class="section-icon tiny" style="background-color: rgb(140, 174, 45);">
          <span class="icon-Lab"></span>
        </div>
        Section name
      </a>
    </h1>
    <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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
  <section class="secondary">
    <h1>
      <a>
        <div class="section-icon tiny" style="background-color: rgb(140, 174, 45);">
          <span class="icon-Lab"></span>
        </div>
        Section name
      </a>
    </h1>
    <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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.dagbladet.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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
    </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.dagbladet.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>
<figure>
 <img src="/assets/placeholder/1400x700.png">
</figure>
<header id="secondary-navigation" class="top-nav" role="banner">
  <section class="secondary alternate">
    <a>
      <img class="logo" src="/assets/logo/magasinet-logo.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 - Alternate secondary Election

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.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </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.dagbladet.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>
<figure>
 <img src="/assets/placeholder/1400x700.png">
</figure>
<header id="secondary-navigation" class="top-nav" role="banner">
  <section class="secondary alternate election">
    <a>
      <img class="logo" src="/assets/navigation-secondary/valg17logo.svg">
    </a>
    <nav>
      <ul>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li><a>Item 3</a></li>
      </ul>
    </nav>
    <a class="small-secondary-toggle">innhold</a>
  </section>
</header>

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 - Page header

.red

Red

.blue

Blue

.green

Green

.orange

Orange

.yellow

Yellow

.purple

Purple

.burgundy

Burgundy

.pink

Pink

.secondary

Secondary

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <h2 class="title {$modifiers}"><a href="#">Something for nothing</a></h2>
  </div>
</header>

11.6.1 - Icon

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <h2 class="title blue">
      <a href="#">
       <img src="../assets/logo/lommelegen.svg">
        Something for nothing
      </a>
    </h2>
  </div>
</header>

11.6.2 - Colors

.red

Red

.blue

Blue

.green

Green

.orange

Orange

.yellow

Yellow

.purple

Purple

.burgundy

Burgundy

.pink

Pink

.secondary

Secondary

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
  <div class="pageheader {$modifiers}">
    <h2 class="title"><a href="#">Something for nothing</a></h2>
  </div>
</header>

11.6.3 - Breadcrumbs

.red

Red

.blue

Blue

.green

Green

.orange

Orange

.yellow

Yellow

.purple

Purple

.burgundy

Burgundy

.pink

Pink

.secondary

Secondary

<header id="top-navigation" class="top-nav" role="banner">
  <div class="primary">
    <h1 class="title">
      <a href="http://www.dagbladet.no" title="Forsiden">
       <img src="../assets/logo/lommelegen.svg">
      </a>
    </h1>
  </div>
  <div class="pageheader">
    <ul class="{$modifiers}">
      <li><a href="#">Home</a></li>
      <li><a href="#">Section</a></li>
      <li class="unavailable"><a href="#">Page</a></li>
      <li class="current"><a href="#">Level</a></li>
    </ul>
  </div>
</header>

11.7 - Chapter navigation (Long read article)

Chapter navigation to be used in special articles (long reads). Requires JavaScript to activate drop down on menu for smaller than large size screen, and as it's a sticky menu.

	<header class="chapter-nav">
	    <div class="row">
	        <a href="#" id="toggle-chapter-nav">
	            <button id="show-menu" class="button tiny white"><span class="icon-Hamburger align-left"></span>INNHOLD</button>
	            <button id="close-menu" class="button tiny white hide"><span class="icon-Close align-left"></span>LUKK</button>
	        </a>
	        <nav>
	            <a href="" class="active">Chapter 1</a>
	            <a href="">Chapter 2</a>
	            <a href="">Chapter 3</a>
	            <a href="">Chapter 4</a>
	        </nav>
	        <ul class="button-group">
	          <li><a href="#" class="tiny button twitter icon"><span class="icon-Twitter"></span><em>Twitter</em></a></li>
	          <li><a href="#" class="tiny button facebook icon"><span class="icon-Facebook"></span><em>Facebook</em></a></li>
	          <li><a href="#" class="tiny button google icon"><span class="icon-Google"></span><em>Google+</em></a></li>
	        </ul>
	    </div>
	</header>

11.8 - Tabs

Requires javascript

 

<ul class="tabs" 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>
  <li class="tab-title"><a href="#panel2-4">Tab 4</a></li>
</ul>

11.8.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>