Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Jquery slideToggle problemi

Kodlarım aşağıdaki gibi:

Jquery


<script type="text/javascript">
	$(document).ready(function(){
	
	$(".pbutton").click(function(){
	$(".panel").slideToggle("slow");
	});
	
	});
	</script>


Css


#header{
height: 500px;
background: url("../images/header_bg.gif") repeat-x;
}

.header_center{
widht:800px;
height: 600px;
background: url("../images/header_center.gif") no-repeat;
position: relative;
top:33px
}

.panel{
width: 204px;
height:168px;
background: #8ACAFD;
border-top: none;
border-right: 2px solid #438ECE;
border-left: 2px solid #438ECE;
border-bottom: 2px solid #438ECE;
position: absolute;
right: 30px;
}

.panel_button{
position: absolute;
top: 170px;
right:120px;
margin: 0;
padding: 0;
background-image: url(../images/panel_button.gif);
background-repeat: no-repeat;
background-position: center top;
}

.pbutton {
text-align: center;
width: 96px;
height: 21px;
display: block;
text-decoration: none;
font: 11px Arial;
font-weight: bold;
color: #006699;
text-shadow: 1px 1px #FFF;
font-size: 1em;
line-height: 22px;
}


Html


<div id="header">
<div class="header_center">
<div class="panel"></div>
<p class="panel_button"><a href="#" class="pbutton">Giriş Yap!</a></p>
</div>
</div>


Butona tıklayınca açılma kapanma işlemi gerçekleşiyor ama tek sorun buton olduğu yerde sabit kalıyor.Buton açılan kapanan menu ile hareket etmiyor. Sanırım position verdiğimden buton yerinde kalıyor ama tasarım gereği öyle kullanmam icap ediyor nasıl düzeltebilirim. Yardımcı olursanız sevinirim.
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Cevaplar

  • secginli adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    32 cevap - 3 soru
    class larda position kullandığın için oluyor. butonda kullandığın absolute top left değerileri ile header-center divine bağlanıyor. Çünkü orda relative position tanımlamışsın. absolute buraya göre top left değeri aldığı için pozisyonu değişmez...
    • php_delisi adlı üyenin fotoğrafı php_delisi
      Evet position yüzünden olduğunu tahmin etmiştim. Ama dediğim gibi proje gereği öyle kullanmak zorundayım. Nasıl düzeltebiliriz sizce?
      10 yıl önce yazılmış
    • secginli adlı üyenin fotoğrafı secginli
      Position kaldırmadan veya absolute kullandığın alanın dışına bir relative position atarak yapabilirsin. İkinci ihtimal ise biraz karışık olacaktır ama click olayı ile o butonun style özelliği ile oynayarak yapabilirsin... click olduğunda top left değerini değiştirebilirsin....
      10 yıl önce yazılmış
    • php_delisi adlı üyenin fotoğrafı php_delisi
      Malesef yapamadım :(
      10 yıl önce yazılmış
    • php_delisi adlı üyenin fotoğrafı php_delisi
      Aşağıdaki şekilde yaptım fakat tıklar tıklamaz buton menuden önce yukarıya yapışıyor ve orada kalıyor

      <script type="text/javascript">
      	$(document).ready(function(){
      	
      	$(".pbutton").click(function(){
      	$(".panel").slideToggle("slow");
              $(".panel_button").css('top','0');
      	});
      	
      	});
      	</script>
      
      10 yıl önce yazılmış
    • secginli adlı üyenin fotoğrafı secginli
      Top 0 yapmışsın gidip relative alana yapışır sen top ifadesine ne kadar aşağı iniyorsan o kadar + değer ekleyeceksin... Mesela top : 170 ya stilinde sen atıyoruz 50px aşağı inecekse top : 220 yapacaksın...
      10 yıl önce yazılmış
  • maxberat adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    3 cevap - 3 soru
    butonu panel class lı divin içine koy buşekilde
     <div class="panel">
    <p class="panel_button"><a href="#" class="pbutton">Giriş Yap!</a></p> 
     </div>
    



    ve
    css kodundaki panel_butonu bu şekilde değiştir
    top:170 ti 150 yapınca istediğin olur sanırım.
    .panel_button{
    position: absolute;
    top: 150px;
    right:120px;
    margin: 0;
    padding: 0;
    background-image: url(../images/panel_button.gif);
    background-repeat: no-repeat;
    background-position: center top;
    }
    
    • php_delisi adlı üyenin fotoğrafı php_delisi
      Dediğin şekilde de yaptım olmadı malesef
      10 yıl önce yazılmış
  • php_delisi adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    10 cevap - 20 soru
    Arkadaşlar yok mu bu sorunun çözümünü bile hayırsever bir vatandaş?
    • php_delisi adlı üyenin fotoğrafı php_delisi
      Çözdüm arkadaşlar sorun position belirtmemden kaynaklanıyormuş
      10 yıl önce yazılmış