ویرگول
ورودثبت نام
صادق رخصتی
صادق رخصتیمتخصص مخابرات ، برنامه نویسی، شبکه و امنیت
صادق رخصتی
صادق رخصتی
خواندن ۲ دقیقه·۶ سال پیش

ساخت یک درختواره ساده در HTML


نمونه یک درختواره
نمونه یک درختواره

در برنامه نویسی وب گاهی نیاز داریم که اطلاعات را بصورت یک درختواره نمایش بدیم.

برای مثال من در اینجا از درختواره برای نمایش ساختار درختی منو به کاربر ( برای دادن دسترسی منو به سایر کاربران ) استفاده کردم.

شما با اضافه کردن مقداری CSS ( به مقدار کافی D: ) میتونید رنگ و لعاب بهتری به ظاهر درختواره بدید.

کد html + css و همچنین کد جاوا اسکریپت لازم ( که برای باز و بسته شدن منوها استفاده میشه) به این صورت است :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<ul id="myUL">
  <li><input type="checkbox"><span class="caret caret-down">صفحه نخست</span>
    <ul class="nested active">
      <li><input type="checkbox">پروفایل</li>
      <li><input type="checkbox">داشبورد</li>
      <li><input type="checkbox"><span class="caret caret-down">تنظیمات</span>
        <ul class="nested active">
          <li><input type="checkbox">دسترسی کاربران</li>
          <li><input type="checkbox"><span class="caret caret-down">اطلاعات پایه</span>
          <ul class="nested active">
              <li>زیرمنو 1</li>
              <li>زیرمنو 2</li>
              <li>زیرمنو 3</li>
              <li>زیرمنو 4</li>
            </ul>
          </li>
          <li><input type="checkbox"><span class="caret caret-down">محاسبات</span>
            <ul class="nested active">
              <li><input type="checkbox">سال مالی</li>
              <li>زیرمنو 5</li>
              <li>زیرمنو 6</li>
              <li>زیرمنو 7</li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
  <li><input type="checkbox">داشبورد دوم</li>
</ul>


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");
  });
}


</body>
</html
htmljavascriptمنو
۲
۰
صادق رخصتی
صادق رخصتی
متخصص مخابرات ، برنامه نویسی، شبکه و امنیت
شاید از این پست‌ها خوشتان بیاید