vendredi 30 octobre 2020

Как сделать скроллинг внутри бокса при раскрытии меню

Добрый день, всем!
Сильно не пинайте, но я не html программист а только понемногу осваиваю азы.
посидев немного и поковыряв просторы интернета, вроде получилось добиться создать раскрывающее меню как необходимо.
Но теперь столкнулся с проблемой, что при развертывании меню текст выходит за бокс.

Ограничил его видимость и добавил scroll. Но он появился и не активен.


<div class="menubox"> <ul class="menu animated"> <li class="menu_children"> <input type="checkbox" name ="group-1" id="group-1" checked> <label for="group-1">Подсистема маркировки</label> <ul> <li class="menu_children"> <input type="checkbox" name ="sub-group-1" id="sub-group-1"> <label for="sub-group-1">Настройка подсистемы маркировки</label> <ul> <li><a href="db/M/settings/org.html">Организации</a> </li> <li><a href="#1">Склады</a> </li> </ul> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-2" id="group-2" checked> <label for="group-2">Раздел: Закупки</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-3" id="group-3" checked> <label for="group-3">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-4" id="group-4" checked> <label for="group-4">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-5" id="group-5" checked> <label for="group-5">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-6" id="group-6" checked> <label for="group-6">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-7" id="group-7" checked> <label for="group-7">Подсистема маркировки</label> <ul> <li class="menu_children"> <input type="checkbox" name ="sub-group-7" id="sub-group-7"> <label for="sub-group-7">Настройка подсистемы маркировки</label> <ul> <li><a href="db/M/settings/org.html">Организации</a> </li> <li><a href="#1">Склады</a> </li> </ul> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-8" id="group-8" checked> <label for="group-8">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-9" id="group-9" checked> <label for="group-9">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> <li class="menu_children"> <input type="checkbox" name ="group-10" id="group-10" checked> <label for="group-10">Раздел: Продажи</label> <ul> <li><a href="db/M/settings/org.html">Заказы поставщикам</a> </li> <li><a href="#1">Поступление товаров (услуг)</a> </li> </ul> </li> </ul> </div>

Добавлено через 2 минуты
Код HTML:

<div class="menubox">  <ul class="menu animated">      <li class="menu_children">      <input type="checkbox" name  ="group-1" id="group-1" checked>      <label  for="group-1">Подсистема маркировки</label>      <ul>          <li class="menu_children">          <input  type="checkbox" name ="sub-group-1" id="sub-group-1">            <label for="sub-group-1">Настройка подсистемы  маркировки</label>          <ul>              <li><a href="db/M/settings/org.html">Организации</a>  </li>            <li><a href="#1">Склады</a>  </li>          </ul>        </li>      </ul>      </li>    <li class="menu_children">      <input  type="checkbox" name ="group-2" id="group-2" checked>      <label  for="group-2">Раздел: Закупки</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-3" id="group-3" checked>        <label for="group-3">Раздел: Продажи</label>        <ul>        <li><a  href="db/M/settings/org.html">Заказы поставщикам</a>  </li>        <li><a href="#1">Поступление товаров  (услуг)</a> </li>      </ul>    </li>      <li class="menu_children">      <input type="checkbox" name  ="group-4" id="group-4" checked>      <label  for="group-4">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-5" id="group-5" checked>        <label for="group-5">Раздел: Продажи</label>        <ul>        <li><a  href="db/M/settings/org.html">Заказы поставщикам</a>  </li>        <li><a href="#1">Поступление товаров  (услуг)</a> </li>      </ul>    </li>      <li class="menu_children">      <input type="checkbox" name  ="group-6" id="group-6" checked>      <label  for="group-6">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-7" id="group-7" checked>        <label for="group-7">Подсистема маркировки</label>        <ul>        <li class="menu_children">          <input  type="checkbox" name ="sub-group-7" id="sub-group-7">            <label for="sub-group-7">Настройка подсистемы  маркировки</label>          <ul>              <li><a href="db/M/settings/org.html">Организации</a>  </li>            <li><a href="#1">Склады</a>  </li>          </ul>        </li>      </ul>      </li>    <li class="menu_children">      <input  type="checkbox" name ="group-8" id="group-8" checked>      <label  for="group-8">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-9" id="group-9" checked>        <label for="group-9">Раздел: Продажи</label>        <ul>        <li><a  href="db/M/settings/org.html">Заказы поставщикам</a>  </li>        <li><a href="#1">Поступление товаров  (услуг)</a> </li>      </ul>    </li>      <li class="menu_children">      <input type="checkbox" name  ="group-10" id="group-10" checked>      <label  for="group-10">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>  </ul> </div>
Добавлено через 1 минуту
Код:

<div class="menubox">  <ul class="menu animated">      <li class="menu_children">      <input type="checkbox" name  ="group-1" id="group-1" checked>      <label  for="group-1">Подсистема маркировки</label>      <ul>          <li class="menu_children">          <input  type="checkbox" name ="sub-group-1" id="sub-group-1">            <label for="sub-group-1">Настройка подсистемы  маркировки</label>          <ul>              <li><a href="db/M/settings/org.html">Организации</a>  </li>            <li><a href="#1">Склады</a>  </li>          </ul>        </li>      </ul>      </li>    <li class="menu_children">      <input  type="checkbox" name ="group-2" id="group-2" checked>      <label  for="group-2">Раздел: Закупки</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-3" id="group-3" checked>        <label for="group-3">Раздел: Продажи</label>        <ul>        <li><a  href="db/M/settings/org.html">Заказы поставщикам</a>  </li>        <li><a href="#1">Поступление товаров  (услуг)</a> </li>      </ul>    </li>      <li class="menu_children">      <input type="checkbox" name  ="group-4" id="group-4" checked>      <label  for="group-4">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-5" id="group-5" checked>        <label for="group-5">Раздел: Продажи</label>        <ul>        <li><a  href="db/M/settings/org.html">Заказы поставщикам</a>  </li>        <li><a href="#1">Поступление товаров  (услуг)</a> </li>      </ul>    </li>      <li class="menu_children">      <input type="checkbox" name  ="group-6" id="group-6" checked>      <label  for="group-6">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-7" id="group-7" checked>        <label for="group-7">Подсистема маркировки</label>        <ul>        <li class="menu_children">          <input  type="checkbox" name ="sub-group-7" id="sub-group-7">            <label for="sub-group-7">Настройка подсистемы  маркировки</label>          <ul>              <li><a href="db/M/settings/org.html">Организации</a>  </li>            <li><a href="#1">Склады</a>  </li>          </ul>        </li>      </ul>      </li>    <li class="menu_children">      <input  type="checkbox" name ="group-8" id="group-8" checked>      <label  for="group-8">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>    <li class="menu_children">        <input type="checkbox" name ="group-9" id="group-9" checked>        <label for="group-9">Раздел: Продажи</label>        <ul>        <li><a  href="db/M/settings/org.html">Заказы поставщикам</a>  </li>        <li><a href="#1">Поступление товаров  (услуг)</a> </li>      </ul>    </li>      <li class="menu_children">      <input type="checkbox" name  ="group-10" id="group-10" checked>      <label  for="group-10">Раздел: Продажи</label>      <ul>          <li><a href="db/M/settings/org.html">Заказы  поставщикам</a> </li>        <li><a  href="#1">Поступление товаров (услуг)</a> </li>        </ul>    </li>  </ul> </div>


Aucun commentaire:

Enregistrer un commentaire