Home JQuery Jquery Üst Menü Yapımı
Jquery Üst Menü Yapımı

Jquery Üst Menü Yapımı

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Ğİ GÖRMEK İÇİN TIKLAYIN

ÖRNEĞİ İNDİRMEK İÇİN TIKLAYIN.

 

 

Hazırlayan : ömer BOZALAN

 

(110)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(4)

  1. 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

    1. 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.

  2. 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 ?

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.