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 : 


Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Eskiden paralı değildi. Herhalde popüler olunca paraya yönelmişler....

  • Bozkurt:

    Bu uygulama paralı ama...

  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Araç çubuğuna atla