Qo'zg'aluvchi menyu yarating

darsga qaytish

Bosish orqali ochiladigan/yiqilib tushadigan menyu yarating:

P.S. Manba hujjatning HTML/CSS-ni o’zgartirish kerak.

Vazifa uchun sandbox-ni oching.

HTML/CSS

Avval HTML/CSS yarataylik.

Menyu sahifada mustaqil grafik komponent bo’lgani uchun uni bitta DOM elementiga joylashtirish yaxshiroq.

Menyu elementlari ro’yxati ul/li ro’yxat sifatida joylashtirilishi mumkin.

Mana misol tuzilma:

          <div class="menu">
  <span class="title">Shirinliklar (menga bosing)!</span>
  <ul>
    <li>Tort</li>
    <li>Donut</li>
    <li>Asal</li>
  </ul>
</div>
        

Biz sarlavha uchun <span> dan foydalanamiz, chunki <div> da yashirin display:block bor va u gorizontal kenglikning 100% ini egallaydi.

Mana shunday:

          <div style="border: solid red 1px" onclick="alert(1)">Shirinliklar (menga bosing)!</div>

Shuning uchun agar biz unga onclick o’rnatsak, u matn o’ng tomonidagi bosilishlarni ushlaydi.

<span> yashirin display: inline ga ega bo’lgani uchun, u barcha matnni sig’dirish uchun aynan yetarli joy egallaydi:

          <span style="border: solid red 1px" onclick="alert(1)">Shirinliklar (menga bosing)!</span>

Menyuni almashtirish

Menyuni almashtirish o’qni o’zgartirishi va menyu ro’yxatini ko’rsatishi/yashirishi kerak.

Bu barcha o’zgarishlar CSS tomonidan mukammal tarzda boshqariladi. JavaScript da biz .open sinfini qo’shish/olib tashlash orqali menyuni joriy holatini belgilashimiz kerak.

Busiz menyu yopiq bo’ladi:

          .menu ul {
  margin: 0;
  list-style: none;
  padding-left: 20px;
  display: none;
}

.menu .title::before {
  content: '▶ ';
  font-size: 80%;
  color: green;
}
        

…Va .open bilan o’q o’zgaradi va ro’yxat ko’rinadi:

          .menu.open .title::before {
  content: '▼ ';
}

.menu.open ul {
  display: block;
}
        

To’liq ishlayotgan misol

          <!DOCTYPE html>
<html>
<head>
  <style>
    .menu {
      cursor: pointer;
      font-family: Arial, sans-serif;
    }

    .menu ul {
      margin: 0;
      list-style: none;
      padding-left: 20px;
      display: none;
    }

    .menu .title::before {
      content: '▶ ';
      font-size: 80%;
      color: green;
    }

    .menu.open .title::before {
      content: '▼ ';
    }

    .menu.open ul {
      display: block;
    }

    .menu li {
      padding: 2px 0;
    }
  </style>
</head>
<body>
  <div class="menu" id="menu">
    <span class="title">Shirinliklar (menga bosing)!</span>
    <ul>
      <li>Tort</li>
      <li>Donut</li>
      <li>Asal</li>
    </ul>
  </div>

  <script>
    document.getElementById('menu').addEventListener('click', function() {
      this.classList.toggle('open');
    });
  </script>
</body>
</html>
        

Asosiy tushunchalar:

HTML tuzilma: <div> konteyner, <span> sarlavha, <ul>/<li> ro’yxat elementlari
CSS holatlar: .open sinfi menyu holatini boshqaradi
JavaScript interaktivlik: classList.toggle() orqali sinfni qo’shish/olib tashlash
Vizual ko’rsatkichlar: O’qlar (▶ yopiq, ▼ ochiq) menyuni holati haqida ma’lumot beradi

Bu yondashuv CSS animatsiyalari va turli xil stil effektlari bilan kengaytirilishi mumkin.

Yechimni sandbox-da oching.