Navigacijske vrstice v CSS

Večina spletišč za prehajanje med posameznimi spletnimi stranmi uporablja navigacijske vrstice oz. menije. Le ti so navadno postavljeni na vrhu strani ali pa na levi oz. desni strani.

Meni je zgrajen iz HTML seznama, da roboti učinkoviteje razvrstijo spletne strani. Obliko menija določimo s CSS.

Oglejmo si primer izdelave menija, kjer bomo za povezavo namesto pravih URL naslovov uporabili #:

1. korak: HTML seznam

Meni je seznam povezav, zato uporabimo za izdelavo neurejen HTML seznam.

<nav>
   <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>

2. korak: Odstranitev oznak in odmikov

V meniju ne potrebujemo oznak, zato jih odstranimo iz seznama. Odstranimo tudi privzete notranje in zunanje odmike brskalnika.

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

3. korak: Pokončni meni

Povezave v seznamu prikažemo kot bločne elemente, kar nam omogoči, da je povezava celotna širina in ne le tekst. Določimo tudi širino povezave in barvo ozadja povezave.

a {
   display: block;
   width: 60px;
   background-color:#FCCC88;
   padding-left: 3px;
}

4. korak: Vodoravni meni

Meni v vodoravno smer postavimo z lastnostjo display: inline ali float: left, ki jo priredimo elementu li:

li {
   display: inline;
}

ali

li {
   float: left;
}

Padajoč meni

Oglejmo si primer padajočega menija izdelanega s CSS.

1. korak: HTML struktura

Najprej kreiramo HTML strukturo, kjer uporabimo oznako nav za meni in neurejena seznama v ustreznih nivojih.

<nav>
   <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 v brskalniku.

2. korak: oblikovanje s CSS

Določimo obliko in položaj neurejenih seznamov in povezav:

ul.meni {
   background: #333;
   height: 30px;
   width: 90%;
}
ul.meni > li { 
   float: left;
   position: relative;
}
ul.meni ul {
    background: #999;
    display: none;
    position: absolute;
    left: 0; top: 100%;
}
ul.meni a { 
    text-decoration: none;
    display: block;
    color: white;
    line-height: 25px;
    padding: 0 10px;
}
ul.meni li { list-style: none; }
ul.meni li:hover { background: #666;  }
ul.meni li:hover ul { display: block;  }

Prikaz v brskalniku.

3. korak: oblikovanje s CSS

Določimo prilagodljivost menija glede na velikost okna brskalnika. Ko se širina okno brskalnika zmanjša pod 480 pik, se meni iz vodoravne oblike spremeni v pokončno.

@media all and (max-width: 480px) {
   ul.meni {  height: auto; }
   ul.meni > li {  float: none; width: 100%; }
   ul.meni a { line-height: 30px; }
   ul.meni ul { position: relative; }
}

Prikaz v brskalniku.