Resimde her butonun menü üzerine geldiği an seçili haldeyken bir görüntüsünğü kaydedip tek resim üzerinde birleştirdim. Göründüğü gibi tek bir menü. Biri mavi biri kırmızı iki adet png formatlı resimden oluşuyor ve Css3 kullanarak yazılarda gölge efekti kullandım biraz. Aslında 3d görünüm vermek istedim ama çok küçük olduğu için pek birşey belli olmuyordu ve hafif boşluklar meydana geliyordu.
Menü örneği jQuery hover efekti ile daha güzel görünür diye onuda ekledim. butonlar arası geçiş pek hoş görünmedi gibi. Oda sizin zevkinize kalmış. Eğer beğenmezseniz JavsScriptkodları ve jQuery url adresini kaldırmanız yeterli olacaktır. Menünün bir diğer özelliği hangi sayfada iseniz o sayfadaki buton kırmızı olarak duruyor. Li elemanları arasına eklenmiş olan kodu butonun secili durumda kalmasını sağlıyor. Anasayfaya ekleyeceğiniz menüde anasayfa butonundaki li elemanlarına kodu eklemeniz gerekiyor. Her sayfa için ayrı ayrı bu şekilde uygulamanız gerekmektedir.
Secili Buton Örneği
1
<li class="secili"><ahref="#">Tutorial</a></li>
Secili Olmayan Buton Örneği
1
<li><ahref="#">Tutorial</a></li>
Kullanım
Head etiketleri arasına eklenmesi gereken bölümler.