Sabit Konumlu Açılır-Kapanır İçerik
Bu alana tıkladığınızda Kategorilere göre ayrılmış RSS simgelerinin (abonelik linklerinin) bir listesi aşağı doğru açılacaktır. Aynı simgeye tıkladığınızda ise bu içerik tekrar kayarak yukarı doğru kapanacaktır. Bunun için bir div elemanın (içerik taşıyıcı) içerisine yerleştirilmiş bir resmi (tetikleyici), bir diğer div elemanının (asıl içerik) içeriğini göstermek için kullanacağız. Burada içerik taşıyıcı‘nın kendisini de tetikleyici olarak kullanabilir ya da sadece içerik taşıyıcıyı da kullanabiliriz, ancak temiz bir görünüm ve düzenli bir yapı için üstteki senaryoyu kullanmak yararlı olacaktır.
Bu sistemi sizde projelerinizde kullanabilir ve bu sayede sitenizin her açılışında ekrana gelen simgelerin oluşturduğu kalabalıktan kurtulmuş, aynı zamanda da kullanıcılarınıza hoş bir görünüm ile diledikleri içeriğe seçimli olarak ulaşma imkanı sunmuş olursunuz.
Sistem Gereksinimleri:
JQuery Paketi (ilgili paketi buradan edinebilirsiniz…)
Denenmiş Platformlar:
3.5 |
7.0 |
4.0 |
9.0 |
10.0 |
9.0 |
Adımlar:
CSS Kodlama
.tasiyici_div{
position:fixed;
height:400px;
right:0px;
top: -340px;
z-index:99;
}
2 – Sistemin sayfa aşağı doğru kaydırıldığında da üstte sabit kalmasını sağlar.
3 – İsteğe bağlı bir yükseklik (NOT: Bu değer tetikleyicinin yüksekliği + gizli içeriğin yüksekliği şeklinde kullanılmalı).
4 – Sağa dayalı sistem için (NOT: eğer sola dayalı olmasını isterseniz left:0px olarak kullanmalısınız – % değer de verilebilir).
5 – Bu değer (-1) x (gizli içeriğin yüksekliği) şeklinde kullanılmalı.
6 – Sayfanızda başka içerikler bulunuyorsa, sistemin bu içeriğin üzerinde görünmesi için yeteri kadar büyük bir değer girin.
JAvaScript Kodlama
<script type="text/javascript">
function ackapa(){
if (document.getElementById("tasiyici").style.top !== "0px"){
jQuery("#tasiyici").animate({top: "0px"}, 500 );}
else {
jQuery("#tasiyici").animate({top: "-340px"}, 500 );}
}
</script>
3,4,6 – İçerik taşıyıcının id değeri ile aynı olmalı
HTML Kodlama
<div class="tasiyici_div" id="tasiyici"> <div style="height: 340px;"> Gizli İçerik Buraya Gelecek </div> <div style="height: 60px;"> <img onclick="ackapa();" src="..." style="cursor: pointer; float: right;" title="Ac/Kapa" /> </div> </div>
2 – Gizli İçeriğin bulunduğu div’in yüksekliği
5 – Tetikleyici’nin bulunduğu div’in yüksekliği