jQuery.easing ile sprite bir üst-menu hazırlama



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 : 


Ali

You may also like

Leave a reply

E-posta hesabınız yayımlanmayacak.