Ajax Akordiyon Menü!

Sanki internetin gereklerinden biri haline gelmiş, sanki web2’nin olmazsa olmazı(buarada bende kullanıyom gördüğünüz gibi)! bir zamanlar "tab menü" meşhurdu, fakat artık reğabet akordiyon menülerde ta ki alternatifler sunulana kadar. Size bir akordiyon menü nasıl yapılır hazır dosyalarıyla birlikte sunacağım.

Günümüzde internet yapmcılarının vazgeçemedikleri bir olan AJAX teknolojisi kullananların sayfalarında çekiciklik katıyor. Neyse artık konuya geçmenin zamanı geldi sanırım.

Nasıl bir görünüm kazanaksınız

Yukarıdaki gibi bir görünüm fakat yeterli değil diyorsanız buradan demoyu inceleyebilirsiniz.

İcraat Bölümü

  1. Gerekli dosyalarınız öncelikle buradan indir ve .rarlı dosyadakileri çıkarın.
  2. JScript dosylarını ana dizine atın.
  3. Style.css dosyasındaki kodları kendi temanızın style dosyasının içine yapıştırın(*dikkat edilmesi gereken konu .body bölümü, çünkü kendi temanızda muhtemelen body olarak tanımlı bölüm mevcut olacaktır.)
  4. .rarlı dosyaan çkardığınız klasörün içindeki örenklerden(HTML dosyalarını inceleyin) hangisini beğendiyseniz. onu açın ve görüntüleyin. Ekrana fare ile sağ tıklayın ve kaynağ görüntüleyi seçin.
  5. Aşağıdaki koduları JScript dosyasını çağırmak için görüntülemek istediğiniz dosyanın içine yağıştırın.

 

Kod

<script type="text/javascript" src="accordian.pack.js"></script>

<body onload="new Accordian(‘basic-accordian’,5,’header_highlight’);">

<div id="test-header" class="accordion_headings header_highlight" >Home</div>

    <div id="test-content">

        <div class="accordion_child">

Buraya görüntülenmesini istediğniz yazıyı ya da kodu ekleyin

        </div>

</div>

Turuncu ile gösterdiğim bölgelere alternatifler üretebilirsiniz. 

Elimden geldikçe basit anlatmaya çalıştım, gereksiz bilgilerden kaçındım. Umarım faydalı olmuştur.

 

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

You may also like...

2 Responses

  1. Avatar foxmulder dedi ki:

    dosyayı indiremiyorum ama:(

    • Veysel Veysel dedi ki:

      @foxmulder
      bunun için DNS ayarlarını değiştirmen gerekiyor. çünkü dosya sites.google daki alanda barındırılıyor. dns ayarlarınızı değiştirmeye müteakip tekrar deneyin. kontrol ettim, indiriliyor.

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.