110
4
Merhaba arkadaşlar jquery üst menü( Jquery Top menu) yapımını anlatacağım. Bazı sitelerde kullanılan bir işlemdir. Kısacası web sayfanızın üstünde olacak ve mouse ile tıkladığınızda menü şeklinde açılan bir çalışma. Kendi sitenizde kullanabilirsiniz.
1 ADIM : HTML dosyanızın <body> </body> içine aşağıdaki kodları yapıştırıyorsunuz.
<div id="sliderWrap"> <div id="openCloseIdentifier"> </ div> <div id="slider"> <div id="sliderContent"> bu güzel? değil mi </ div> <div id = "openCloseWrap"> <a href="#" id="topMenuImage"> <img src="open.png" alt="open" /> </ a> </ div> </ div> </ div>
2.ADIM <head> </head> arasına aşağıdaki kodları yazıyorsunuz.
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> <style type="text/css"> body { margin: 0; font-size:16px; color: #000000; font-family:Arial, Helvetica, sans-serif; } #sliderWrap { margin: 0 auto; width: 300px; } #slider { position: absolute; background-image:url(slider.png); background-repeat:no-repeat; background-position: bottom; width: 300px; height: 159px; margin-top: -141px; } #slider img { border: 0; } #sliderContent { margin: 50px 0 0 50px; position: absolute; text-align:center; background-color:#FFFFCC; color:#333333; font-weight:bold; padding: 10px; } #header { margin: 0 auto; width: 600px; background-color: #F0F0F0; height: 200px; padding: 10px; } #openCloseWrap { position:absolute; margin: 143px 0 0 120px; font-size:12px; font-weight:bold; } </style>
3.ADIM ise html dosyasının size indirmek için vereceğim jquery-1.2.6.min dosyasının yanında bulunması.
ÖRNEĞİ İNDİRMEK İÇİN TIKLAYIN.
Hazırlayan : ömer BOZALAN
(110)
Yorum(4)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
slmlar. jqueryi çözmeye calısıyorum ama ılk deneme uygulamam hep basarısız 🙁
belkı yardım edersınız dıye yazıyorum :
jquery ıle bır klasordekı resımlerın tumune bır tek efekt eklemek ıstıyorum. anlatılan herseyı yapıuyorum ama olmuyor. sorun şu galıba : images adında bır klasor var ve php ve html ıle cagrılan div ‘in adıda images. jqueryi kodu imagesı yakalayamıyor :()
Adipoli jQuery Image Hover Effects’i uygulamaya calısıyorum.
umarım cevaplarsınız tskler
faruk arkadaşım çalışmanızı kendiniz sıfırdan mı yapıyorsunuz yoksa yapılmış bir çalışmayı düzenliyor musunuz? çalışmayı bana email yoluyla atarsanız sevinirim.
Hocam merhaba, scroll menü örneğiniz var mı acaba ? Yani menü mesela ortada sabit mause ile aşağıya indiğimde tarayıcının üstünde kalmasını istiyorum. Bununla ilgili çalışmanız var mı acaba ?
Black arkadaşım malesef öyle bir örneğimiz şimdilik yok. Olursa haberin olur siteyi takip edersen.