07.12.03.Vista stílusú menü CSS-sel

A Windows Vista toolbar rendszere elég pofásra sikeredett, ami weben is elég jól mutat. Gondoltam ebben a kis bejegyzésben bemutatom, hogyan is készíthet ilyet, vagy valami hasonlót bárki magának.

Íme egy screenshot az eredeti Vista toolbarrol.

És íme a HTML-ben reprodukált toolbar, amiből egy demót is készítettem.

A grafikai elemek elkészítésére most szándékosan nem térek ki, mivel a hangsúly a működés megvalósításán van. Természetesen a kód használatával teljesen más kinézetű menüket is létrehozhatunk.
Akinek mégis szüksége lenne hozza egy kis grafikai tutorialra, annak ajánlanám Tupacko remek leírását a témával kapcsolatban!

A HTML kód

A menü felépítése végtelenül egyszerű, mivel a hagyományos lista elemeket kell csak alkalmaznunk a kódban, némi CSS kiegészítéssel.

  <div id="vista_toolbar">
    <ul>
      <li><a href="#"><span><img align="left"
        src="visual/add.gif" />Blog</span></a></li>
      <li><a href="#"><span><img align="left"
        src="visual/chart.gif" />Oldalak</span></a></li>
      <li><a href="#"><span><img align="left"
        src="visual/mona.gif" />Galéria</span></a></li>
      <li><a href="#"><span><img align="left"
        src="visual/sos.gif" />Arhívum</span></a></li>
      <li><a class="right" href="#"><span><img align="left"
        src="visual/mail.gif" />Kapcsolat</span></a></li>
    </ul>
  </div>

A CSS kód

Itt már kicsivel több kódra lesz szükségünk, de ez sem vészes. A jobb érthetőség kedvérért kommenteztem a kódot, hogy mi mire is szolgál.

/* Kép keretei ne látszódjanak */
img {
  border: 0pt;
}
/* A toolbar alap értékei */
#vista_toolbar {
  float:left;
  font:normal 12px 'Trebuchet MS','Arial';
  margin:0;
  padding:0;
}
/* A toolbar háttere */
#vista_toolbar ul {
  background-image:url(back.gif);
  background-repeat:repeat-x;
  float:left;
  line-height:32px;
  list-style:none;
  margin:0;
  padding:0 10px 0 10px;
  width:500px;
}
/* Lista elemek egysorba állítása */
#vista_toolbar li {
  display:inline;
  padding:0;
}
/* Gomb címkék szövegének formázása */
#vista_toolbar a {
  color:#FFF;
  float:left;
  padding:0 3px 0 3px;
  text-decoration:none;
}
/* Gomb méretre igazítása */
#vista_toolbar a span {
  display:block;
  float:none;
  padding:0 10px 0 7px;
}
/* Gomb hivatkozás alap állapotban */
#vista_toolbar a span img {
  border:none;
  margin:8px 4px 0 0;
}
/* Gomb hivatkozás rámutatáskor (bal oldalt) */
#vista_toolbar a:hover{
  background: url(left.png) no-repeat left center;
}
/* Gomb hivatkozás rámutatáskor (jobb oldalt) */
#vista_toolbar a:hover span {
  background:url(right.png) no-repeat right center;
}
/* Jobbra igazított gomb elhelyezkedése */
#vista_toolbar a.right {
  float:right;
}

A végeredmény teljesen valid kód és minden elterjedt böngészőn helyes működés (tesztelve: Firefox 2, IE6, IE7, Opera, Konqueror).
Ha valakinek valami nem világos, esetleg ötlete van a témával kapcsolatban, az bátran szóljon hozzá lentebb.

A menü kódja és képei zip-elve letölthetők és szabadon felhasználhatóak!