11.1 - Top-nav
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
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="">…</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
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
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>