JavaScript, CSS ile Hiyerarşik Liste Oluşturmak

- Aralık 22, 2021

Blog için hiyerarşik başlık listesi oluşturmak istediğimizde aşağıdaki HTML, stil biçimlendirme, javascript kodlarını kullanabiliriz.

Bu stil kodu, <head></head> arasına yerleştirilmelidir. Açılan liste ok rengini kaldırmak isterseniz "color: black;" kodunu stilden çıkarabilir, rengini değiştirmek isterseniz "black" yerine başka bir renk kullanabilirsiniz.

<style>
ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}
</style>

Bu javascript kodunu <head></head> arasına yerleştirebilirsiniz. Blog üzerinde ise kesinlikle HTML listeleme kodundan önce eklemelisiniz. Çevrim dışı HTML dosyasında <body></body> arasında, yine HTML listeleme kodundan önce eklemelisiniz.

<script>
var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
</script>

Bu HTML listeleme kodu, <body></body> arasına yerleştirilmelidir. "myUL" kimliği ve "caret", "nested" stil sınıfları gereklidir. Bunları, Türkçeleştirmek isterseniz, stil kümesinde ve javascript kodundaki kısımları da değiştirerek işlem yapabilirsiniz.

<ul id="myUL">
  <li><span class="caret">Konu 1</span>
    <ul class="nested">
      <li>1.1. Alt Başlık</li>
      <li>1.2. Alt Başlık</li>
      <li><span class="caret">1.2.1. Alt Başlık</span>
        <ul class="nested">
          <li>1.2.1.1. Alt Başlık</li>
          <li>1.2.1.2. Alt Başlık</li>
          <li><span class="caret">1.2.1.2.1. Alt Başlık</span>
            <ul class="nested">
              <li>1.2.1.2.1.1. Alt Başlık</li>
              <li>1.2.1.2.1.2. Alt Başlık</li>
              <li>1.2.1.2.1.3. Alt Başlık</li>
              <li>1.2.1.2.1.4. Alt Başlık</li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  <li><span class="caret">Konu 2</span>  
    <ul class="nested">
      <li>2.1. Alt Başlık</li>
      <li>2.2. Alt Başlık</li>
    </ul>
  </li>
</ul>

Test:

Konu 1
- 1.1. Alt Başlık
- 1.2. Alt Başlık
- 1.2.1. Alt Başlık
  - 1.2.1.1. Alt Başlık
  - 1.2.1.2. Alt Başlık
  - 1.2.1.2.1. Alt Başlık
    - 1.2.1.2.1.1. Alt Başlık
    - 1.2.1.2.1.2. Alt Başlık
    - 1.2.1.2.1.3. Alt Başlık
    - 1.2.1.2.1.4. Alt Başlık
Konu 2
- 2.1. Alt Başlık
- 2.2. Alt Başlık

Kaynak: https://www.w3schools.com/howto/howto_js_treeview.asp

Bu Blogda Ara

Muharrem DOĞANCI

JavaScript, CSS ile Hiyerarşik Liste Oluşturmak

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Google Tablolarda Script İle Satır Silmek

İletişim

Osmanlı İktisat Tarihi, Ders Notları