Horizontalni padajući (drop down) navigacioni meni je logičan nastavak teme Navigacioni meni sa podmenijem (forma statičke liste sa podlistom). Kod statičke liste sa podlistom videli ste da su u isto vreme uočljivi meni i podmeni. Što se tiče horizontalnog padajućeg navigacionog menija koji ćete videti u nastavku teksta, uočljive će biti stavke glavnog menija, dok će podmeni biti prikazan samo u slučaju pozicioniranja strelice miša iznad menija (koji u sebi sadrži podmeni)...

U čemu se razlikuju skripte statičkog navigacionog menija sa podmenijem i horizontalnog padajućeg navigacionog menija? Kod statičke navigacije konfigurisan je samo HTML menija, dok će na primeru horizontalnog padajućeg menija osim HTML-a biti konfigurisan izgled tj. stil navigacije. Tačnije, precizno ćemo odrediti izgled navigacije CSS-om.

Dakle, u šablonu vaše web stranice ili bloga iznad oznake </head> kopirajte sledeću skriptu:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Str. 1</a>  
<ul><li><a href="#">Podmeni 1</a></li>
<li><a href="#">Podmeni 2</a></li>
<li><a href="#">Podmeni 3</a></li>
</ul>
<li><a href="#">Str. 2</a></li>
</li>
<li><a href="#">Str. 3</a></li>
</ul>
</nav>

Tag tj. oznaka <nav> odnosi se na navigaciju i ista oznaka biće konfigurisana CSS skiptom, kao i kompletno "ponašanje", te stil navigacije.

Skriptu CSS-a ovog navigacionog menija kopirajte iznad oznake </body> u šablonu web stranice ili bloga.

<style>
li { list-style:none;font-family: Arial, Serif; color:#fff; padding:10px; font-size:20px; text-decoration:none; }
li > a:after { content: ' »'; list-style:none;} /* Simbol duple strelice promenite u željeni - samo meni kraj koga stoji oznaka duple strelice sadrži podmeni */
li > a:only-child:after { content: ''; }
li { list-style:none; color:#fff; padding:10px; font-size:20px; text-decoration:none; }
nav ul { background: #64abfburl('VEZA DO POZADINSKE SLIKE ILI TEKSTURE') repeat; list-style:none; padding:0; margin:0;/* Konfigurisanje pozadinske boje i teksture */ }
nav ul li { list-style: none;  line-height:44px; float:left; background: #64abfb url('VEZA DO POZADINSKE SLIKE ILI TEKSTURE') repeat; /* Konfigurisanje pozadinske boje i teksture */ }
nav ul li a { color:#fff; padding:10px; font-size:20px; text-decoration:none;}
li a:hover { border-bottom:3px #fff solid;  } /* Ovde konfigurišete izgled menija kada strelica miša dođe u poziciju iznad - u ovom slučaju to je podvučena bela linija */
nav ul li ul { display:none; } /* Konfiguracija  funkcije skrivanja podmenija */
nav ul li:hover  ul  { /* Konfigurisanje prikaza podemnija kada strelica miša dođe u poziciju iznad menija koji u sebi sadrži podmeni */ z-index:99999; display:list-item; position:absolute; margin-top:5px; margin-left:-10px; }
nav ul li:hover  ul li { float:none; }
</style>

Praktično ovaj primer horizontalnog navigacionog menija sa podmenijem izlega ovako (klikni na vezu da vidiš demo) »


Eksterne veze:
Demo sa horiz. drop-down navigacijom »
Download skripte »