Horizontalni padajući navigacioni meni

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) »

Na preciznije podešavanje izgleda navigacionog menija uticaćete promenama pozadinske boje, veličine i tipa fonta... Npr. promenite vrednosti koje se odnose na oznake color, list-style, ili promenite recimo font-family: Arial, Serif; itd. Dalje, pozadinu navigacije možete urediti nekom teksturom tako što ćete u deo CSS-a koji se odnosi na pozadinsku boju navigacije (background-color) dodati liniju: background: url ('VEZA DO SLIKE SA TEKSTUROM')... Uz malo strpljenja i eksperimentisanja doći ćete do željenog dizajna i rezultata.

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

0 Comments »

Leave a comment






Mobile View
Template modified for blog modd4fun by modd4fun*
Powered by Blogger Skins
Theme: TheBuckmaker | Free Wordpress Templates