CSS veya jQuery ile Açılan/Kapanan Div

Vatanay Özbeyli CSS3, jQuery

jQuery & CSS3 Toggle

Gelişen ve yenilenen web tasarımı dilleri sayesinde Toggle, yani fareyle etkileşim kurulduğunda gözüken, etkileşim kesildiğinde kaybolan elemanlar hazırlamak fazlasıyla kolay. Artık, eskiden olduğu gibi bu işlemi yapmak için sayfalarca JavaScript veya Action Script yazmamıza da gerek kalmıyor.

Bu makalemizde Adobewordpress ailesi olarak size iki adet açılıp/kapanan div örneği hazırlayacağız. Bunlardan birisi sadece CSS ile çalışacak, diğeri ise jQuery desteği ile işleyecek.

CSS mi kullanmalı yoksa jQuery mi?

Tercihi yapacak olan sizlersiniz. Kullanıcı kitlenize veya tasarımınıza göre bu seçimi yapabilirsiniz.

CSS ile yapmanızın avantajları/dezavantajları

  • jQuery’e ihtiyaç duymadığı için web sayfanızın dosya boyutunda ve açılış hızında düşme olacaktır.
  • Hazırlanması kısmen daha kolaydır.
  • IE’nin eski versiyonlarında sorun yaratır.
  • Gizlenecek ve gösterilecek eleman, ana elemanın etiketleri içerisinde olmalı. Aksi halde tasarım işlemez. Bu da CSS mantığının en büyük handikabı olarak dikkat çekiyor.

jQuery ile yapmanızın avantajları/dezavantajları

  • jQuery kütüphanesi neredeyse her sitede kullandığını için size ek bir yük oluşturmayacaktır.
  • Hazırlanışı kısmen daha zordur. Sadece CSS değil, birkaç satır JS kodu da yazmanız gerekir.
  • Tüm tarayıcılarda kusursuz çalışır.
  • Gizlenecek ve gösterilecek eleman, body tagı içerisinde nerede olursa olsun tasarım işler. Bu da jQuery kullanmanız için yeterli bir sebep olarak gösterilebilir.

Üzerine gelince gözüken div nasıl yapılır?

Yukarıda da belirttiğimiz gibi iki ayrı yol üzerinden bu tasarımı oluşturacağız. En sonunda ise Codepen desteğiyle canlı bir örnek paylaşacağız.

CSS ile Yapımı

İlk olarak HTML kodlarımız ile başlayalım.

<div class="css-toggle">CSS ile Gizle/Göster
  <span>Bu eleman <b>.css-toogle</b>'ın içerisinde olması gerek</span>
</div>

Görebileceğiniz gibi yukarıdaki kodlarda span elemanımız css-toogle içerisinde. Böyle de olmak zorunda. Aksi halde çalışmaz.

.css-toggle{
  color:white;
  background-color:tomato;
}
.css-toggle:hover span{display:block;}

.css-toggle span{
  display:none;
  color:#111;
}

Bu kadar. Sırada jQuery ile yapımı var.

Bu da ilginizi çekebilir  Görselleriniz üzerine gelince büyüsün

jQuery ile Yapımı

İlk olarak jQuery kütüphanesini sitemize ekleyelim. İster head elemanı içerine ekleyin, istersenizde sitenizin en altında işlemi yapın.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Sırasıyla HTML, CSS ve JS kodlarımızı yazalım.

<div class="js-toggle">jQuery ile Gizle/Göster
  <span>Bu elemanın nerede olduğunun önemi yok.</span>
</div>

Yukarıdaki span elemanı js-toogle içerisinde olmak zorunda değil. Sayfanın neresine koyarsanız koyun, çalışacaktır.

.js-toggle{
  color:white;
  background-color:CornflowerBlue;
}

.js-toggle span{
  display:none;
  color:#111;
}

Ve son olarak JS kodlarımızı ekleyelim.

  $(".js-toggle, .js-toggle span").on("mouseenter", function() {
  $(".js-toggle span").css( "display", "block" );
  }).on("mouseleave", function() {
  $(".js-toggle span").css( "display", "none" );
  });

İşlem tamam! Şimdi sonucu görüntüleyelim.

Kapanış

Google’da her gün yüzlerce kez aranan bir konu tasarımalrdaki Toggle mantığı. Geçtiğimiz hafta sadece bu konuyla alakalı iki adet elektronik posta tarafımıza gönderildiği için sizlere hızlıca bu makaleyi hazırladık.

Sonuç