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

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


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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1&quot>
<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: &quot\25B6&quot
  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=&quotmyUL&quot>
  <li><input type=&quotcheckbox&quot><span class=&quotcaret caret-down&quot>صفحه نخست</span>
    <ul class=&quotnested active&quot>
      <li><input type=&quotcheckbox&quot>پروفایل</li>
      <li><input type=&quotcheckbox&quot>داشبورد</li>
      <li><input type=&quotcheckbox&quot><span class=&quotcaret caret-down&quot>تنظیمات</span>
        <ul class=&quotnested active&quot>
          <li><input type=&quotcheckbox&quot>دسترسی کاربران</li>
          <li><input type=&quotcheckbox&quot><span class=&quotcaret caret-down&quot>اطلاعات پایه</span>
          <ul class=&quotnested active&quot>
              <li>زیرمنو 1</li>
              <li>زیرمنو 2</li>
              <li>زیرمنو 3</li>
              <li>زیرمنو 4</li>
            </ul>
          </li>
          <li><input type=&quotcheckbox&quot><span class=&quotcaret caret-down&quot>محاسبات</span>
            <ul class=&quotnested active&quot>
              <li><input type=&quotcheckbox&quot>سال مالی</li>
              <li>زیرمنو 5</li>
              <li>زیرمنو 6</li>
              <li>زیرمنو 7</li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
  <li><input type=&quotcheckbox&quot>داشبورد دوم</li>
</ul>


var toggler = document.getElementsByClassName(&quotcaret&quot);
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener(&quotclick&quot, function() {
    this.parentElement.querySelector(&quot.nested&quot).classList.toggle(&quotactive&quot);
    this.classList.toggle(&quotcaret-down&quot);
  });
}


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