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

Jquery Üst Menü Yapımı

161
4

Merhaba arkadaşlar üst menü( 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

 

(161)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni 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ınlarak 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 ?

Senin Yorumların

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

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.