Navigacijske vrstice v CSS

Navigacijske vrstice in meniji omogočajo premikanje med posameznimi deli spletišča. Običajno jih postavimo na vrh strani, v stranski stolpec ali v glavo spletišča.

Meni je navadno zgrajen iz HTML seznama povezav, saj je takšna struktura pregledna, smiselna in semantično ustrezna. Obliko in način postavitve menija nato določimo s CSS.

Na tej strani si bomo ogledali osnovno zgradbo menija, pokončni meni, vodoravni meni, spustni meni in odzivni meni.

Osnovna pravila

• Navigacija mora biti pregledna in dosledna na vseh straneh spletišča.
• Povezave v meniju morajo imeti dovolj veliko klikabilno površino.
• Besedilo menijskih povezav naj bo kratko, jasno in razumljivo.
• Meni naj bo uporaben tudi na ožjih zaslonih.
• Pri interaktivnih menijih je pomembna tudi podpora za tipkovnico.

Osnovna zgradba menija

Meni je seznam povezav, zato za osnovo uporabimo neurejen seznam znotraj elementa nav.

<nav id="meniOsnova">
   <ul>
      <li><a href="#">Domov</a></li>
      <li><a href="#">Novice</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">O nas</a></li>
      <li><a href="#">Forum</a></li>
   </ul>
</nav>

Nato odstranimo privzete oznake seznama ter privzete odmike, ker želimo videz menija urediti sami.

#meniBrezOznak ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

Pokončni meni

Pri pokončnem meniju povezave prikažemo kot bločne elemente. Tako je klikabilna celotna površina posamezne menijske postavke, ne le samo besedilo.

#meniPokoncni ul {
   list-style: none;
   margin: 0;
   padding: 0;
   width: 180px;
}

#meniPokoncni a {
   display: block;
   padding: 8px 12px;
   background-color: #fccc88;
   color: #333;
   text-decoration: none;
   border-bottom: 1px solid #e7b95e;
}

#meniPokoncni a:hover,
#meniPokoncni a:focus {
   background-color: #f7be58;
}

Vodoravni meni

Za vodoravno postavitev je danes običajno najbolj smiselna uporaba lastnosti display: flex. Starejši primeri pogosto uporabljajo float, vendar je flex preglednejši in primernejši za sodobne postavitve.

#meniVodoravni ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   background-color: #333;
}

#meniVodoravni li {
   margin: 0;
}

#meniVodoravni a {
   display: block;
   padding: 10px 14px;
   color: white;
   text-decoration: none;
}

#meniVodoravni a:hover,
#meniVodoravni a:focus {
   background-color: #666;
}

Spustni meni

Spustni meni lahko zgradimo z gnezdenim seznamom. Podmeni je privzeto skrit, ob prehodu z miško ali ob premiku tipkovnega fokusa pa ga prikažemo.

1. korak: HTML struktura

<nav id="meniSpustniOsnova">
  <ul class="meni">
    <li><a href="#">Spletišče</a></li>
    <li>
      <a href="#" class="has-sub">Kodiranje</a>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">MySQL</a></li>
        <li><a href="#">PHP</a></li>
      </ul>
    </li>
    <li><a href="#">CMS</a></li>
    <li><a href="#">Visual Web</a></li>
  </ul>
</nav>

Prikaz prvega koraka v zunanji datoteki:

Odpri prvi korak

2. korak: osnovno oblikovanje menija

#meniSpustni ul.meni {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   width: 90%;
   background: #333;
}

#meniSpustni ul.meni > li {
   position: relative;
}

#meniSpustni ul.meni ul {
   list-style: none;
   margin: 0;
   padding: 0;
   background: #999;
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   min-width: 180px;
}

#meniSpustni ul.meni a {
   display: block;
   padding: 8px 12px;
   color: white;
   text-decoration: none;
}

#meniSpustni ul.meni li:hover > ul,
#meniSpustni ul.meni li:focus-within > ul {
   display: block;
}

Prikaz drugega koraka v zunanji datoteki:

Odpri drugi korak

Odzivni meni

Na ožjih zaslonih se meni spremeni v pokončno obliko. Pri tem podmeni ne ostane absolutno postavljen, temveč se vključi v normalen tok dokumenta. Tako je meni preglednejši in primernejši za manjše zaslone.

@media all and (max-width: 640px) {
   #meniOdzivni ul.meni {
      width: 100%;
      display: block;
   }

   #meniOdzivni ul.meni > li {
      width: 100%;
   }

   #meniOdzivni ul.meni ul {
      position: static;
      min-width: 0;
   }
}

Končni odzivni primer v zunanji datoteki:

Odpri končni odzivni primer

Priporočila

• Za osnovo menija uporabi seznam povezav znotraj elementa nav.
• Povezave prikaži kot bločne elemente, da bo klikabilna površina večja.
• Za vodoravne menije je danes pogosto najbolj pregledna rešitev display: flex.
• Pri spustnih menijih poskrbi tudi za uporabo s tipkovnico, na primer z :focus-within.
• Na ožjih zaslonih prilagodi meni z uporabo pravil @media.

Pogoste napake

• Privzete oznake in odmiki seznama niso odstranjeni, zato je videz menija nepregleden.
• Povezave ostanejo vrstični elementi, zato je klikabilna površina premajhna.
• Podmeni se odpira samo ob prehodu z miško, ne pa tudi ob uporabi tipkovnice.
• Na ožjih zaslonih meni ni prilagojen in postane težko uporaben.
• Barvni kontrast med ozadjem in besedilom je prešibek.