Site navigation

Til vestre I toppelementet ligger inngangen til megameny. Menyen har fire hovedkategorier med tilhørende underpunkter. På mobil må man åpne kategoriene for å få se underpunktene. Dette for å spare plass og gjøre menyen oversiktlig. Antall hovedkategorier skal være avgrenset, men elementene under disse kan tilpasses fortløpende. Når man har valgt et punkt i menyen vil dette være markert med prikk og gult neste gang menyen åpnes.

<nav class="site-navigation js-menu site-navigation--open" id="site-navigation" aria-expanded="true" aria-hidden="false">
      <div class="site-navigation__content-wrapper">
         <div class="site-navigation__content">
            <div class="row">
               <div class="xsmall-12 columns">
                  <div class="language-selector langauge-selector--menu">
                     <ul class="site-navigation__section list--reset-style-type">
                        <li class="site-navigation__section-content">
                           <button class="site-navigation__section-btn site-navigation__section-btn--language-selector site-navigation__section-btn--open" aria-expanded="true" aria-controls="section-btn-1c5d8a3d-c0ba-4ab2-aeb4-824db98dee73"><span class="language-selector__flag language-selector__flag--menu language-selector__flag--white" data-language="norwegian (bokmål)"></span>Language<span class="site-navigation__icon-arrow"></span></button>
                           <ul class="site-navigation__section-items language-selector__language-list--menu list--reset-style site-navigation__section-items--open" id="section-btn-1c5d8a3d-c0ba-4ab2-aeb4-824db98dee73" aria-expanded="true" aria-hidden="false">
                              <li class="language-selector__language-list-item"><a class="language-selector__language-link link--no-underline" href="#"><span class="language-selector__flag language-selector__flag--white" data-language="english"></span><span class="language-selector__language-link-underline">English</span></a></li>
                              <li class="language-selector__language-list-item"><a class="language-selector__language-link link--no-underline" href="#"><span class="language-selector__flag language-selector__flag--white" data-language="norsk (nynorsk)"></span><span class="language-selector__language-link-underline">norsk (nynorsk)</span></a></li>
                              <li class="language-selector__language-list-item language-selector__language-list-item--current"><span class="language-selector__current-language"><span class="language-selector__flag" data-language="norsk (bokmål)"></span>norsk (bokmål)</span></li>
                           </ul>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="xsmall-12 large-3 columns">
                  <ul class="site-navigation__section list--reset-style-type">
                     <li class="site-navigation__section-content ">
                        <h2 class="site-navigation__section-title">Tjenester</h2>
                        <button class="site-navigation__section-btn site-navigation__section-btn--open" aria-expanded="true" aria-controls="section-btn-cfd7d0bf-267d-473b-9930-d220ec9d559a">Tjenester<span class="site-navigation__icon-arrow"></span></button>
                        <ul class="site-navigation__section-items list--reset-style site-navigation__section-items--open" id="section-btn-cfd7d0bf-267d-473b-9930-d220ec9d559a" aria-expanded="true" aria-hidden="false">
                           <li class="site-navigation__section-item site-navigation__section-item--top-level">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Oversikt over tjenester</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Anmelde tyveri eller skade</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Arrangementer</span></a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </div>
               <div class="xsmall-12 large-3 columns">
                  <ul class="site-navigation__section list--reset-style-type">
                     <li class="site-navigation__section-content ">
                        <h2 class="site-navigation__section-title">Råd og forebygging</h2>
                        <button class="site-navigation__section-btn site-navigation__section-btn--open" aria-expanded="true" aria-controls="section-btn-2ecc3ff3-95ed-4b86-9d4f-88a6f20e032f">Råd og forebygging<span class="site-navigation__icon-arrow"></span></button>
                        <ul class="site-navigation__section-items list--reset-style site-navigation__section-items--open" id="section-btn-2ecc3ff3-95ed-4b86-9d4f-88a6f20e032f" aria-expanded="true" aria-hidden="false">
                           <li class="site-navigation__section-item site-navigation__section-item--top-level">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Oversikt over råd og forebygging</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Alvorlige uoppklarte saker</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Datakriminalitet</span></a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </div>
               <div class="xsmall-12 large-3 columns">
                  <ul class="site-navigation__section list--reset-style-type">
                     <li class="site-navigation__section-content ">
                        <h2 class="site-navigation__section-title">Aktuelt, tall og fakta</h2>
                        <button class="site-navigation__section-btn site-navigation__section-btn--open" aria-expanded="true" aria-controls="section-btn-0539ae23-db49-4f78-8a97-fdd0cd9c2394">Aktuelt, tall og fakta<span class="site-navigation__icon-arrow"></span></button>
                        <ul class="site-navigation__section-items list--reset-style site-navigation__section-items--open" id="section-btn-0539ae23-db49-4f78-8a97-fdd0cd9c2394" aria-expanded="true" aria-hidden="false">
                           <li class="site-navigation__section-item site-navigation__section-item--top-level">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Oversikt over aktuelt, tall og fakta</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Aktuelt</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Tall og fakta</span></a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </div>
               <div class="xsmall-12 large-3 columns">
                  <ul class="site-navigation__section list--reset-style-type">
                     <li class="site-navigation__section-content site-navigation__selected">
                        <h2 class="site-navigation__section-title">Om oss</h2>
                        <button class="site-navigation__section-btn site-navigation__section-btn--open" aria-expanded="true" aria-controls="section-btn-6d7c2a9f-c0e4-467b-9596-bcc458c61efb">Om oss<span class="site-navigation__icon-arrow"></span></button>
                        <ul class="site-navigation__section-items list--reset-style site-navigation__section-items--open" id="section-btn-6d7c2a9f-c0e4-467b-9596-bcc458c61efb" aria-expanded="true" aria-hidden="false">
                           <li class="site-navigation__section-item site-navigation__section-item--top-level">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Oversikt over om oss</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Innsyn og postjournal</span></a>
                           </li>
                           <li class="site-navigation__section-item ">
                              <a class="site-navigation__link" href="#"><span class="site-navigation__link-underline">Jobb i politiet</span></a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </nav>