açılır menü - drop down panel
gönderen: turgut | kategori: blogger, javascript | tarih: 7.8.09
dynamic drive tarafından yapılmış bir açılır menüyü sizlerle paylaşacağım. önizleme için önce linke sonra da sol üstte bulunan "Tavan Arası"na tıklayın: drop down panel
açılır menü ile sayfanızda yer kaplamayan, istediğiniz içeriği barındıran bir menüye sahip olabilirsiniz.
uygulanışı:
yerleşim>html'yi düzenle bölümü açılır ve </head> etiketi öncesine aşağıdaki kodlar eklenir:
<link href='http://www.hotlinkfiles.com/files/2734713_6ppeg/ddpanel.css' rel='stylesheet' type='text/css'/> <script src='http://www.hotlinkfiles.com/files/2739937_rgssr/ddpanel.js' type='text/javascript'/>
ardından <body> etiketi sonrasına içeriğin bulunacağı kodlar eklenir:
<div class='ddpanel' id='mypanel'>
<div class='ddpanelcontent' id='mypanelcontent'>
<p style='padding:5px'>
<img class='closepanel' src='http://resim_linki.jpg' style='float:left; width:128px; height:128px;'/>
Buraya dilediğiniz içeriği ekleyebilirsiniz.
</p>
</div>
<div class='ddpaneltab' id='mypaneltab'>
<a href='#'><span>Tavan Arası</span></a>
</div>
</div>
şablon kaydedilir.
dosyalarda değişiklik yapmak istiyorsanız indirebilirsiniz: ddpanel.js | ddpanel.css
Notlar:
1 - "Tavan Arası" yerine istediğinizi yazabilirsiniz (aç/kapa gibi).
2 - panel butonunu tek bir resimle değil de iki resimle de oluşturabilirsiniz. böylece panelin açılıp kapandığı sırada resim de değişir (roll over efekti). istediğiniz resimlerin linklerini aşağıdaki kodlara sırasıyla eklemeniz gerekiyor:
pointerimage: {enabled: true, src: ["http://resim_linki1.png", "http://resim_linki2.png"]},
hazırladığım örnek resimler şu şekilde:
3 - panelin resme tıklanarak doğrudan kapatılabilmesi için resme "closepanel" sınıf adı verilir.
4 - Butonun, sayfanın sağında ya da ortasında olmasını istiyorsanız ddpanel.css dosyasındaki float değerlerini right ya da center yapmalısınız.
Kayıtlar
