Muharrem DOĞANCI: JavaScript, CSS ile Hiyerarşik Liste Oluşturmak

22 Aralık 2021 Çarşamba

JavaScript, CSS ile Hiyerarşik Liste Oluşturmak

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

Muharrem DOĞANCI

Bu Blogda Ara

22 Aralık 2021 Çarşamba

JavaScript, CSS ile Hiyerarşik Liste Oluşturmak

Hiç yorum yok:

Yorum Gönder