Kada sam bio mlađi, tj neiskusniji, mnogo me je zezao horizontalni meni sa zaobljenim ivicama. Znao sam da to nije veliki problem da se napravi, ali nikako nisam mogao da upamtim sve što treba da bi meni izgledao baš onako kako sam ga ja zamislio ali i nacrtao. Takođe mi se dešavalo da ono što nacrtam neznam da iskodiram da sa “papira” pretočim u HTML/CSS kod.

Nekada posle više sati rada na samom meniju počeo sam da se nerviram oko jednostavne stvari ali i meni u tom trenutku jako teške.

Ovom prilikom želim da pokažem mlađim HTML/CSS  koderima kako mogu lako da naprave horizontalni meni sa zaobljenim ivicama, a pritom da ne koriste AJAX (Jquery, Mootols…) framework-e.

Meni možete da vidite na ovoj strani kao i da skinete source code! Takođe za ovaj meni će vam biti potrebne background slike definisane u CSS-u.

Leva strana menija

Desna strana menija (u slučaju da vam reč u meniju ima mnogo karaktera moraćete sliku da produžite, ovo je samo primer)

Background za Meni

Desno dugme miša na sliku i Save  Image As da bi sliku sačuvali na svom kompjuteru. (takodje imate u source codu ceo meni)

Evo i Html koda:

<h2>Designers and Coders CSS Menu</h2>
<div id=”menu”>
<ul>

<li id=”current”><a href=”Home.html”><span>Home</span></a></li>
<li><a href=”Products.html”><span>O nama</span></a></li>
<li><a href=”Services.html”><span>Servisi</span></a></li>
<li><a href=”Support.html”><span>Podrska</span></a></li>
<li><a href=”Order.html”><span>Naruci</span></a></li>
<li><a href=”News.html”><span>Novosti</span></a></li>
<li><a href=”About.html”><span>Contact</span></a></li>

</ul>
</div>

A evo i CSS-a koji obavlja sav “prljav” posao:

#menu {
float:left;
width:100%;
background:#F4F7FB url(back.gif) top left repeat-x;
font-size:12px;
line-height:normal;
}

#menu ul {
margin:0;
padding:10px 10px 0 15px;
list-style:none;
}

#menu li {
display:inline;
margin:0;
padding:0;
}

#menu a {
float:left;
background:url(”left-tab.gif”) no-repeat left top;
margin-left:2px;
padding:0 0 0 4px;
text-decoration:none;
}

#menu a span {
float:left;
display:block;
background:url(”right-tab.gif”) no-repeat right top;
padding:4px 15px 2px 6px;
color:#666;
font-family:Arial, Helvetica, sans-serif;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#menu a span {float:none;}
/* End IE5-Mac hack */

#menu a:hover span {
color:#627EB7;
}

#menu a:hover {
background-position:0% -22px;
}

#menu a:hover span {
background-position:100% -22px;
color:#09C;
}

#menu #current a {
background-position:0% -22px;
}

#menu #current a span {
background-position:100% -22px;
}

Nadam se da sam pomogao sa ovim postom i da ćete sada lakše da pravite odnosno da razumete CSS horizontalni meni.