Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
1

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

28.10.2020, 11:33. Показов 1476. Ответов 18
Метки нет (Все метки)

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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>
0
Миниатюры
Как сделать скроллинг внутри бокса при раскрытии меню  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.10.2020, 11:33
Ответы с готовыми решениями:

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

DataTemplate на ListBox. Как сделать так, чтобы при раскрытии Expander
...в ListBoxItem, это самый айтем становился выбранным? А то у меня тупо раскрывается экспандер и...

Как сделать, чтобы при раскрытии вкладки, все элементы сдвигались вниз
Всем привет, подскажите пожалуйста, как сделать так, что бы при раскрытии вкладки, все элементы...

Navbar не отталкивает content при раскрытии меню
Здравствуйте! Подскажите, пожалуйста, как сделать так, чтобы при раскрытии меню navbar не...

__________________
18
Модератор
Эксперт JSЭксперт HTML/CSS
3610 / 2524 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
28.10.2020, 12:08 2
Цитата Сообщение от SMakcik Посмотреть сообщение
добавил scroll. Но он появился и не активен
Видимо, не туда добавили. Приложите CSS-код, чтобы можно было воспроизвести проблему.
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
28.10.2020, 12:15  [ТС] 3
Запаковал и вложил
0
Вложения
Тип файла: zip style.zip (1.7 Кб, 6 просмотров)
Тип файла: zip css.zip (849 байт, 6 просмотров)
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
28.10.2020, 21:58  [ТС] 4
актуально
0
Модератор
Эксперт JSЭксперт HTML/CSS
3610 / 2524 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
29.10.2020, 02:05 5
Ограничьте высоту .menu
CSS
1
2
3
.menu {
    height: 300px;
}
1
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
29.10.2020, 10:48  [ТС] 6
т.е. всегда нужно ограничивать высоту?
А если мне нужно чтобы этот блок начинался с верху 300px и был всегда до низу экрана?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3610 / 2524 / 1489
Регистрация: 12.07.2015
Сообщений: 6,477
Записей в блоге: 4
29.10.2020, 11:32 7
Высота должна ограничиваться вручную или автоматически. Если блок развернут на 100%, то что в нем прокручивать?
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
29.10.2020, 13:55  [ТС] 8
Я другое имею ввиду. Блок должен ограничиваться нижним положением самого окна браузера. Т.е. оно может и свернуто быть и развернуто (окно), а соответственно сам блок с меню тоже принимает разные высоты. И само меню естественно больше чем блок.
На скрине видно что скрол уходит далеко ниже. А нужно чтобы он завершался в низу окна где. А сейчас такое ощущение да это и так видно, что скрол уплывает за нижнюю границу вместе с меню
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
29.10.2020, 14:01  [ТС] 9
В прикрепленном файле видно, что меню уходит далеко в низ за конец блока (который как раз ограничивается нижней точкой окна браузера)
Красным помечено как должен появиться скроллинг
0
Миниатюры
Как сделать скроллинг внутри бокса при раскрытии меню  
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
30.10.2020, 10:43  [ТС] 10
ап+
0
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,126
30.10.2020, 16:07 11
CSS
1
height: 100% ?
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
30.10.2020, 19:05  [ТС] 12
А почему-то когда указываешь 100% то меню располагается с верха экрана до низу, а не занимает 100% блока в который входит меню.
Где-то допустил косяк

Добавлено через 3 минуты
Сейчас попробовал. 100% не помогает
0
Модератор
Эксперт HTML/CSS
1468 / 975 / 468
Регистрация: 13.03.2010
Сообщений: 3,595
30.10.2020, 19:40 13
SMakcik, вам ответили, что 100% - не поможет и нужно ограничивать высоту. В тоннах вашего кода нет никакого желания разбираться, поэтому и нет дальнейших ответов. Выделите основное.
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
30.10.2020, 19:46  [ТС] 14
Вы к сожалению не правы и подобных ответов не было.
0
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,126
31.10.2020, 11:38 15
Честно говоря, не понятно что вы хотите, судя по картинкам - вы хотите чтобы высота блока при изменении экрана совпадало с высотой браузера?

Добавлено через 1 минуту
Цитата Сообщение от SMakcik Посмотреть сообщение
А если мне нужно чтобы этот блок начинался с верху 300px и был всегда до низу экрана?
написали же что если хотите ограничить, то выставляйте конкретную высоту, если хотите полную высоту что показало, вообще не ставьте ее
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
31.10.2020, 19:35  [ТС] 16
Еще разок что я хочу.

Есть блок левого контента в котором будет располагаться шапка и само меню.
Сам контейнер будет отображаться на 100% высоты экрана (как и отображается)

Сам блок меню нначало 300px а низ должен ограничиваться нижнем положением окна браузера.
Что и было показано на скрине

Так понятно или еще что не понятно.
0
Миниатюры
Как сделать скроллинг внутри бокса при раскрытии меню  
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
03.11.2020, 10:27  [ТС] 17
ап+
0
Эксперт HTML/CSS
1347 / 1121 / 490
Регистрация: 07.08.2016
Сообщений: 3,069
03.11.2020, 14:14 18
Лучший ответ Сообщение было отмечено SMakcik как решение

Решение

SMakcik, так?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="wrap">
  <div class="out">
    <div class="in">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate iusto omnis culpa, assumenda, quibusdam minus corporis distinctio consectetur saepe ex ad magnam ratione accusantium odit nisi, voluptas totam earum unde? </div>
    <div class="menu">
      <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
      </ul>
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, eos doloribus eius illum corrupti nam a praesentium voluptatum nisi, corporis officiis provident. Culpa fugit quisquam cupiditate quod natus tenetur voluptas.
  </p>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
  margin: 0;
  height: 150vh;
}
.wrap {
  padding-left: 200px;
}
 
.out {
  width: 200px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
.in {
  height: 300px;
  background: #0f0;
}
.menu {
  width: 100%;
  background: #f00;
  position: absolute;
  top: 300px;
  bottom: 0;
  overflow: auto;
}
0
-34 / 0 / 0
Регистрация: 28.10.2020
Сообщений: 13
03.11.2020, 15:47  [ТС] 19
Спасибо за ответ.
Проверил и сравнил. Оказалось нужно было убрать только height и выставить position и все встало на свои места
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
03.11.2020, 15:47

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Исключение для элементов списка подменю при раскрытии меню
Здравствуйте. Пытаюсь сделать реализацию многоуровневого меню с jQuery. Возникла такая проблема,...

При щелчке на слово меню при разрешении 640px меню выпадает, как сделать такое же действие при щелчке на белую полоску
При щелчке на слово меню при разрешении 640px меню выпадает, как сделать такое же действие при...

Как сделать, чтобы меню-гамбургер скрывалось при клике на любую область, кроме самого меню
// Menu opener hamburger $('.menu-open').click(function() { // При клике на button...

как сделать что бы текст не выходил за пределы бокса?
Когда внутри бокса делаешь так &lt;p&gt;111111111....и так еще много 1&lt;/p&gt; текст выходит за пределы...

Как сделать Скроллинг?
Всем привет! Проблема вот в чем... Мне нужен блок div со скроллингом и по горизонтали и по...

Как сделать такой скроллинг?
Здравствуйте. Подскажите пожалуйста, как сделать такой же скроллинг как на сайте...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.