Pozdrav čitatelji, danas ću vam pojasniti kako da uredite navigaciju za vaš template, tj. kako da kreirate izbornike za vaš portal u par jednostavnih linija koda.

U nastavku teksta saznajte kako definisati izgled izbornika u CSS kodu.

Zadnji put smo vise obraćali pažnju na raspored elemenata.

1. Prvo dodamo u moj  top_navlist div.

...
<div id="top_navlist">
<h3>Left position: Main Menu</h3>
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
</div><!--//top_navlist-->
...

2. Zatim dodamo u h3

...
#top_navlist h3{
display: none;
}
...
...
#footer h3{
display: none;
}
...

3.  Sada  nam je potreban finalni CSS kako bi dobili lijepsi izgled

...
#top_navlist {
position: absolute;
top: 6px;
margin-left: 550px;
border: 1px solid #ffff00;/*to help see positioning*/
}
#top_navlist h3{
display: none;
}
.menu, .menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width: 220px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sansserif;
font-size: 14px;
font-variant: small-caps;
}
.menu li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
}
.menu li a {

width: 190px;
line-height: 30px;
display : block;
color : #453110;
font-weight : bold;
text-decoration : none;
text-align: right;
border-bottom : 1px solid #666;
padding-right: 30px;
}
...
 

Toliko za danas, sa izradom vašeg template nastavljamo za par dana.