jQuery Süper bir menü örneği.
Özelliği : Menü Tek resim halind e duruyor fakat websayfasından baktığınız zaman 12 farklı resim gibi görünüyor bu kısımda yapmanız gereken tek resim üzerinde birleşmiş olan bölümleri örnek ben kendime göre uyarladım blog forum iletişim vs artık size de tek düşen bu resmi kendi sitenize göre uyarlamak.
Aşağıdaki demo linkinden örneğin çalışır bir uygulamasını ve sitenize ekleyeceğiniz olan kodları bulabilirsiniz. Rar olarak sıkıştırılmış olan örneğin çalışan bir halininde indirme linkinden indirebilirsiniz.
Kullanım
- Head etiketleri arasına eklenmesi gereken bölümler.
jQuery ve eklenti url adresleri :
JavaScript :
Css:
a{ color:#000000}
BODY { }
.kwicks { background-color: #000; list-style-type: none; margin: 0; padding: 0; position: relative; z-index: 2; width: 840px; height: 50px }
.kwicks LI {PADDING: 0px; DISPLAY: block;Z-INDEX: 2; FLOAT: left;OVERFLOW: hidden; WIDTH: 120px; CURSOR: pointer;HEIGHT: 50px}
.kwicks LI A { background-image: url(image/yesil1.png); background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; display: block; z-index: 2; height: 50px; outline: none medium }
#jquery_menu1 A {BACKGROUND-POSITION: 0px 0px}
#jquery_menu1 A:hover {BACKGROUND-POSITION: 0px -50px}
#jquery_menu1 #aktiv {BACKGROUND-POSITION: 0px -50px}
#jquery_menu2 A {BACKGROUND-POSITION: -190px 0px}
#jquery_menu2 A:hover {BACKGROUND-POSITION: -190px -50px}
#jquery_menu2 #aktiv {BACKGROUND-POSITION: -190px -50px}
#jquery_menu3 A {BACKGROUND-POSITION: -380px -50px}
#jquery_menu3 A:hover {BACKGROUND-POSITION: -380px 0px}
#jquery_menu3 #aktiv {BACKGROUND-POSITION: -380px -50px}
#jquery_menu4 A {BACKGROUND-POSITION: -570px 0px}
#jquery_menu4 A:hover {BACKGROUND-POSITION: -570px -50px}
#jquery_menu4 #aktiv {BACKGROUND-POSITION: -570px -50px}
#jquery_menu5 A {BACKGROUND-POSITION: -760px 0px}
#jquery_menu5 A:hover {BACKGROUND-POSITION: -760px -50px}
#jquery_menu5 #aktiv {BACKGROUND-POSITION: -760px -50px}
#jquery_menu6 A {BACKGROUND-POSITION: -950px 0px}
#jquery_menu6 A:hover {BACKGROUND-POSITION: -950px -50px}
#jquery_menu6 #aktiv {BACKGROUND-POSITION: -950px -50px}
- Body etiketleri arasına eklenmesi gereken bölüm.
Html :
