Меню-аккордеон с числом пунктов

@seregadushka · Регистрация: 22.08.2011

Студворк — интернет-сервис помощи студентам

Конечно, меню не мое. Вот оно Pure CSS Accordion

Как видите из названия Pure ... -- это очень популярная тема -- делать сложные вещи просто на CSS.
Изначально в оригинале не было JS. Я его туда добавил, и сделал ему случайные фильтры . Фильтры были постояные, теперь случайные при обновлении страницы.
Случайный код JS простой, универсальный. Его можно брать и лепить везде, где хочется чего-то случайного.

Вопрос: как сделать чтобы пункты меню имели постоянную высоту. Я пока не знаю, как ее ограничивать, но больше 2 строк не надо. Чтобы текст слева упирался (вроде есть) , и прятался под правую, с простой обрезкой текста.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="Form">
  <input name="input" class="input" type="number" value="3" min="1" onchange="show()">
</form>
<div class="wrap">
    <input type="checkbox" checked>
        <ul id="list">
      <li></li>
        <li><a class="link" href="https://ya.ru">Text 2 Text 2 Text 2 Text 2 Text 2 Text 2</a></li>
      <li></li>
      <li></li>
        </ul>   
</div>
<div class="credits">
  <a target="_blank" href="https://codepen.io/emoreno911">@emoreno911</a>
<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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*  @import "compass/css3";  */ 
 
:root {--sec: 2s ease-in-out;  
       --count: 3;}
$bg1: "https://dl.dropbox.com/s/mbho5bqfofk6g99/pic.jpg";
$bg2: "https://dl.dropbox.com/s/kioimintl0v9l4d/pic.jpg";
$bg3: "https://dl.dropbox.com/s/7a60gndncwf81x8/pic.jpg";
$bg4: "https://dl.dropbox.com/s/nkwuv9jz8i99309/pic.jpg";
 
body { background-color: #000;
       display: flex;
       flex-direction: column;  }
 form {margin-left: calc((100% - 1160px) / 2);}
.input {
  width: 2em;
  padding: auto;
/*  font-size: 1.2em;  */  }
.link {position: absolute;
       background-color: #444A;
       padding: 1vw;
       bottom: 0px;
 /*    left: 50%;
       transform: translateX(-50%);
       overflow: hidden;                */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
       text-overflow: ellipsis;
       white-space: wrap;
       z-index: 1;
       text-decoration: none;
       color: #FFF; 
       font-size: 3vw;   }
 
 a {color: red;
    background-color: #111;
    font-family: "Segoe UI", "Ubuntu", monospace;
    font-weight: 500;
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 4px;  
    font-size: 1.5vw;   }     
ul {
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
  li {position: relative;
    float: left; 
    width: 16.666%; 
    height: 600px;
    opacity: 0.4;
    transition: var(--sec);
    &:hover, &:first-child ~ li:last-child {
      width: 50%;
      opacity: 1;
     transition: var(--sec);   }
    &:hover ~ li:last-child {
      width: 16.666%;
      opacity: 0.4;    }
    &:nth-child(1) {background: url($bg1) top center no-repeat; }
    &:nth-child(2) {background: url($bg2) top right  no-repeat; }
    &:nth-child(3) {background: url($bg3) top center no-repeat; }
    &:nth-child(4) {background: url($bg4) top center no-repeat; }
      }  // End li
    } // End ul
 
.menu {}
 
/** Add cool filter efects **/
ul li {
  &::before {
    content: "";
    display:block;
    width:0;
    height:100%;
    transition: var(--sec);  }
 
&:nth-child(1)::before {background-color: rgba(calc(25.5 * var(--random1,10)), calc(25.5 * var(--random2,10)), calc(25.5 * var(--random3,10)), .3)  }
&:nth-child(2)::before {background-color: rgba(calc(25.5 * var(--random3,10)), calc(25.5 * var(--random1,10)), calc(25.5 * var(--random2,10)), .25) }
&:nth-child(3)::before {background-color: rgba(calc(25.5 * var(--random2,10)), calc(25.5 * var(--random3,10)), calc(25.5 * var(--random1,10)), .25) }
&:nth-child(4)::before {background-color: rgba(calc(25.5 * var(--random1,10)), calc(25.5 * var(--random3,10)), calc(25.5 * var(--random2,10)), .3)  }
        }   /*  End  ul li */
 
input:checked ~ ul li::before { 
  width: 100%;
  transition: var(--sec); 
}
 
input[type="checkbox"] {
  width:200px;
  margin: 5px;
  font-family: "Segoe UI", "Ubuntu", monospace;
  color: white;
  &::after{
    content: "Filters Enabled";
    color: #caa;
    position: relative;
    top: -3px;
    left: 5px;
  }
}
 
/** Layout fixes **/
.credits {text-align: right;
          margin-top: 5px;     }
.credits a {margin-right: calc((100% - 1230px)/2);}
 input[type="checkbox"] {margin-left: calc((100% - 1160px)/2);}
@media (max-width: 1240px) {
  .credits a { margin-right: 0px;}
   input[type="checkbox"] { margin-left: 35px;}   }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function RandomInt(min, max){
  return Math.floor(Math.random()*(max - min) + min)} ;
 
let random1 = RandomInt(1, 10);
let random2 = RandomInt(1, 10);
let random3 = RandomInt(1, 10);
 
let root=document.querySelector(":root"); 
root.style.setProperty("--random1", random1);
root.style.setProperty("--random2", random2);
root.style.setProperty("--random3", random3);
 
function show() {
  count = parseInt(document.forms.Form.input.value);
  block = new Array();
  for (i = 0; i < count; i++)
    block.push('<li></li>');
  document.getElementById('list').innerHTML = block.join('');
                 }
window.addEventListener("load", (event) => {show()} );
root.style.setProperty("--count", count);

krvsa · 16.01.2024, 14:01

Сообщение от seregadushka

в скрипте идет увеличение шрифта. Но оно не работает

Сделай полный пример с html...

@seregadushka · 16.01.2024, 15:07 **[ТС]**

krvsa, так есть же пример . Одмин его сопировал на страницу, но живой CODEPEN ничем не заменишь.
Рано копировать, не похож код на кончательный .
clip-path: polygon + skew = 3D

Добавлено через 8 минут
и может есть какой системный, логический совет. На ПК это меню на Codepen выглядит неплохо, если занимает 30% высоты страницы. Но это же меню, есть еще и остальной сайт. И если оно откроется на мобильном, там много высоты ему отдашь.
Какой размер ширифта сделать ?
Популярный размер в VW . но единицы в виде EM , которые в HOVER не очень сочетаются с VW , связи между ними нет. Т.е. хочется привязать размер шрифта к ширине экрана и одновременно к высоте всего #container
Как по другому тут размер шрифта выразить ?

Добавлено через 10 минут
еще вопрос :

CSS
1
2
3
4
:root {
--imgclip: polygon(0 0, 95% 5%, 100% 95%, 5% 100%); /*обрезка изображения*/  }
 
transform: skew(5deg);

polygon() его угол наклона граней меняется от ширины экрана, от числа вкладок этих панелей
есть способ привести polygon( ... deg, ... deg, ... deg, ... deg, ) ?

@seregadushka · 18.01.2024, 13:11 **[ТС]**

Поискал в инете, похоже нет способа указать polygon() наклон граней точно в deg

Добавлено через 8 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
window.onload = function() { /* размер шрифта наведения  */
  var container = document.getElementById('container');
  var fontSizeNum = parseFloat(window.getComputedStyle(container).getPropertyValue('font-size'));
  container.onmouseover = function() {
    container.style.fontSize = (fontSizeNum * 2) + 'vw';
  } 
 container.onmouseout = function() {
    container.style.fontSize = fontSizeNum + 'vw';
  }
}

Почему не работает этот скрипт, шрифт не меняется, где ошибка

@seregadushka · 23.01.2024, 02:37 **[ТС]**

CSS
1
2
3
#container li:hover .head {
width: calc(100% - ((2 * var(--padd_vert)) + var(--font_my)) * (var(--count) - 1) );
}

здесь берется высота шрифта (без hover ) + 2 * padding вертикальный , все умножается на (число панелей -1) . Математика такая , вроде правильно. Все это отнимается от 100%
как в этом классе сделать Ширину плашки равно картинке ? 100% чего ?
Было бы правильно, если бы 100% от ширины всего контенера, но это не работает

Добавлено через 1 час 14 минут
вопрос про это меню clip-path: polygon + skew
но интересно, что его родоначальник rr33rr-4
имеет ту же ширину width: 100% -- и плашка равна точно ширине картинки. Что я там намудрил ?

@rr33rr · 23.01.2024, 06:23

Сообщение от seregadushka

как в этом классе сделать Ширину плашки равно картинке ?

CSS
2
width: calc(100% - 2*var(--padd_hor));

@seregadushka · 23.01.2024, 14:10 **[ТС]**

rr33rr, работает ! Но почему ? Соседнее меню работает на чистом 100% ???
Может, еще будут замечания ? Я там флекс всунул, может, чего конфликтует ?

@seregadushka · 28.01.2024, 06:23 **[ТС]**

вот этот аккордеон , без фильтра можно считать законченным. Но в теме есть и другой аккордеон, его тоже хочется доделать.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@seregadushka 35 / 3 / 0 Регистрация: 22.08.2011 Сообщений: 172
	23.01.2024, 14:10 [ТС]
	rr33rr, работает ! Но почему ? Соседнее меню работает на чистом 100% ??? Может, еще будут замечания ? Я там флекс всунул, может, чего конфликтует ? 0

@seregadushka 35 / 3 / 0 Регистрация: 22.08.2011 Сообщений: 172
	28.01.2024, 06:23 [ТС]
	вот этот аккордеон , без фильтра можно считать законченным. Но в теме есть и другой аккордеон, его тоже хочется доделать. 0