Aşağıdaki örnekte anlatılmış olan css menü grafik ağırlıklı bir menüdür. Aktiflik imajına sahiptir. Yani resmin üzerine gidince farklı renkte bir hover efekti bulunuyor. Aşağıdaki yapılan anlatımda bu tür menülerin nasıl oluşturulduğu konusunda bir fikre sahip olabilirsiniz.

Yada bu güzel menüyü web sitenize optimize ederek kullanabilirsiniz. En güzeli ise menü’nün psd dosyalarının bulunması. Böylece yeni paşlayan arkadaşlar psd’de yapılan bir grafiğin nasıl css’ye döküldüğünü fiilen görebilir.

<ul id="topnav">
<li> <a href="index.htm"> Anasayfa </ a> </ li>
<li> <a href="about.htm"> Hakkımızda </ a> </ li>
<li> <a href="services.htm"> Hizmetler </ a> </ li>
<li> <a href="portfolio.htm"> Portföy </ a> </ li>
<li> <a href="contact.htm"> İletişim </ a> </ li>
<li> <a href="blog.htm"> blog </ a> </ li>
</ ul>

Css Kodları

ul # topnav (
margin: 0; padding: 0;
list-style: none;
float: left;
width: 960px;
)
# li topnav ul (
float: left;
margin: 0; padding: 0;
)

/ *-- CSS Sprites - Default Devlet - * /
# topnav ul a (
float: left;
display: block;
height: 58px; / Gezinme *-- belirtin yükseklik - * /
	text-indent:-99999px; / *-- Shoot sayfadan metin - * /
	background-position: left top;
)
/ *-- CSS Sprites - Hover State - * /
ul # bir topnav: hover (
background-position: left-58px;
)
/ *-- Atama bir görüntü ve her bağlantı genişliği - * /
ul # topnav li.home a (
background-image: (home_a.jpg url);
width: 120px;
)
ul # topnav li.about a (
background-image: (about_a.jpg url);
width: 147px;
)
ul # topnav li.services a (
background-image: (services_a.jpg url);
width: 157px;
)
ul # topnav li.portfolio a (
background-image: (portfolio_a.jpg url);
width: 182px;
)
# li.contact topnav ul a (
background-image: (contact_a.jpg url);
width: 179px;
)
ul # topnav li.blog a (
background-image: (blog_a.jpg url);
width: 175px;
)

Resimler kaynakta css sprite kullanarak hazırlanmış. Css sprite bildiğiniz gibi menüler ve butonlar için çok işe yarar bir css işlevi. Birden fazla resim kullanmaya gerek kalmadan tek resimde herşeyi halledebiliyorsunuz.

#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.services a, /*--Services Page > Services Link--*/
#portfolio li.portfolio a, /*--Portfolio Page > Portfolio Link--*/
#contact li.contact a, /*--Contact Page > Contact Link--*/
#blog li.blog a /*--Blog Page > Blog Link--*/
{
	background-position: left bottom;
}