Я создал вертикальное меню и хочу расширить его по всей высоте области просмотра, но если этого недостаточно, чтобы вместить его, мне нужен какой-то механизм прокрутки (на странице или в вертикальном меню это нормально). в обоих случаях), что позволяет мне это сделать. Я попробовал несколько способов, но не смог добиться желаемого эффекта.
С помощью этого решения
and I can see all the vertical menu when I scroll on the body, but only when I have scrolled a lot and this isn't user friendly. This isn't acceptable.
/*#region BASE */
@import url("https://fonts.googleapis.com/css2?family=Anta&family=Madimi+One&display=swap");
*,
*::after,
*::before {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
font-family: inherit;
}
html {
font-size: 16px;
}
body {
background-image: url("https://i.ibb.co/gDgZ3c9/background-Template.png");
background-size: cover;
background-attachment: fixed;
font-family: "Anta", sans-serif;
/* Non uso gridbox perchè gridbox imposta la dimensione delle colonne nell'elemento genitore(quindi qui nel body) con la
proprietà grid-template-columns e non riuscirei con il meccanismo dell'input:checkbox a cambiarne la dimensione
(perchè non posso selezionare il body quando l'input è checked perchè il body è l'elemento genitore).
Con flexbox invece quando clickco sull'hamburger Menu basta cambiare la Dimensione della Sidebar */
display: flex;
/* Еще один вариант */
align-items: start;
}
a {
text-decoration: none;
}
/*#endregion BASE */
< br />/*#region SIDEBAR*/
/* Используемая позиция:липкая и вверху:0 слева:0 не видна */
header.sidebar {
позиция: липкий;
/* переполнение-y: авто;
переполнение-x: видимое; */
вверху: 0;
внизу: 0;
слева: 0;
фоновое изображение: линейный градиент (
30 градусов,
rgba(5, 5, 75, 0,85),
rgba(5, 5, 75, 0,85) 20%,
rgb(5, 5, 75)
);
min-height: 100vh;
min-height: 100svh;
ширина: 65 пикселей;
отступ: 0,4 rem 0,8 rem;
переход: все 0,5 с easy;
}
/*#region SIDEBAR HEADER*/
.sidebar__header {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar__header__logo {
display: flex;
align-items: center;
отображение: нет;
}
.sidebar__header__logo img {
ширина: 50 пикселей;
}
.sidebar__header__logo span {
цвет: белый;
}
.sidebar__header__hamburger {
курсор: col-resize;
поля-верх: 0,4rem;
}
/*#endregion SIDEBAR HEADER*/
/*#region SIDEBAR USER*/
.sidebar__user {
display: flex;
justify-content: center;< br />}
.sidebar__user__img {
ширина: 50 пикселей;
высота: 50 пикселей;
соответствие объекта: обложка;
граница: 3 пикселя, сплошной RGB (182, 5, 152);
border-top-color: rgb(23, 23, 201);
border-bottom-color: rgb(23, 23, 201);
border-radius: 50%;
margin-top: 20px;
}
.sidebar__user__name {
display: none;
}
/*#endregion SIDEBAR USER*/
/*#region SIDEBAR MENU*/
.sidebar__menu__item {
min-height: 40px;
поля : 10px 0;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar__menu__item:hover {
border-radius: 10px;
цвет фона: белый;
}
.sidebar__menu__item:hover .sidebar__menu__item__icon::before {
/* background -изображение: красный; */
фоновое изображение: линейный градиент(rgb(5, 5, 75), rgb(5, 5, 75));
размер шрифта: больше;
}
.sidebar__menu__item a {
позиция: относительная; /* Используется для позиционирования всплывающей подсказки */
display:block;
/* Следующие два правила используются, чтобы гарантировать, что тег
a идеально перекрывается с тегом li < br /> родительский элемент, чтобы кликабельная поверхность
ссылки увеличивалась и равнялась поверхности li */
width: 100%;
min-height: inherit;
display : flex;
justify-content: center;
align-items: center;
}
.sidebar__menu__item__text {
height: 3.2em;
min - ширина: 100 пикселей;
дисплей: нет;
размер шрифта: 1rem;
цвет фона: rgb(182, 5, 152);
фоновое изображение: линейный градиент (
вправо,
rgb(23, 23, 201),
rgb(182, 5, 152)
);
background-clip: text; < br /> -webkit-text-fill-color: Transparent;
}
/* Это правило действует как запасной вариант в случае -webkit-text-fill-color или background-clip: text;
не поддерживаются */
.sidebar__menu__item__icon {
color: rgb(23, 23, 201);
}
:is(. Sidebar__menu__item__icon, .sidebar__header__hamburger)::before {
фоновое изображение: линейный градиент(
вправо,
rgb(23, 23, 201),
rgb(182, 5) , 152)
);
background-clip: text;
-webkit-text-fill-color: Transparent;
}
.sidebar__menu__tooltip {
позиция: абсолютная;
справа: 0;
сверху: 50%;
/* 0,8rem — размер отступа правой боковой панели */
/* 10 пикселей — это расстояние, на котором я хочу разместить всплывающую подсказку
от края боковой панели */
Transform: Translate(calc(100% + 0.8rem + 10px), -50%);
цвет фона: белый;
радиус границы: 8 пикселей;
минимальная ширина: 75 пикселей;
выравнивание текста: по центру;
размер шрифта: 0,7 rem;
шрифт-вес: 500;
семейство шрифтов: "Segoe UI", Tahoma, Женева, Вердана, без засечек;
отступ: 5 пикселей;
межбуквенный интервал: -0,2 пикселя ;
отображение: нет;
цвет: rgb(5, 5, 75);
}
.sidebar__menu__item a:hover .sidebar__menu__tooltip {
display : блок;< br />}
/*#endregion SIDEBAR MENU*/
/*#region SIDEBAR INPUT*/
input#sidebar-toggle {
отображение: нет;
>
input#sidebar-toggle:checked + header.sidebar {
ширина: 250 пикселей;
}
/*#endregion SIDEBAR INPUT*/
/*#endregion SIDEBAR*/
/*#region MAIN */
/* input#sidebar-toggle: проверено ~ main.main-content {
} */
main.main-content {
flex-grow: 1;
}
/* #endregion MAIN */
/* для устройств, не поддерживающих наведение, добавляю фокус и актив для перехвата касания.
Таким образом, всплывающая подсказка будет появляться при касании (длительное касание).
Поэтому вместо наведения я добился щелчка, но меня это устраивает
Это решение может не подойти работают для мобильных браузеров Edge, для которых необходимо добавить в html
aria-haspopup="true" */
/* В этом случае медиа-запрос @media all и (hover: none) не требуется, потому что в противном случае, если вы удерживаете
пункт меню, всплывающее окно активируется и остается открытым (поскольку оно активно) и останется открытым, пока вы не щелкнете в другом месте.
Чтобы понять это, попробуйте код на компьютер с помощью мыши, удалив медиа-запрос @media all и (наведите курсор: none)
Обратите внимание, что мы игнорируем другие указывающие устройства (например, стилусы)
*/
@ media all и (hover: none) {
.sidebar__menu__item a:focus .sidebar__menu__tooltip,
.sidebar__menu__item a:active .sidebar__menu__tooltip {
цвет фона: красный;
дисплей: блок ;
/*#region BASE */
@import url("https://fonts.googleapis.com/css2?family=Anta&family=Madimi+One&display=swap");
*,
*::after,
*::before {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
font-family: наследовать;
}
html {
размер шрифта: 16 пикселей;
}
body {
фоновое изображение: url("https://i.ibb.co/gDgZ3c9/background-Template.png");
размер фона: обложка;
прикрепление фона: исправлено;
семейство шрифтов : "Anta", sans-serif;
/* Я не использую GridBox, потому что Gridbox устанавливает размер столбцов в родительском элементе (следовательно, здесь, в теле) с помощью
Grid-template-property столбцов, и я не смогу изменить их размер с помощью механизма input:checkbox (потому что я не могу выбрать тело, когда вход проверен, потому что тело является родительским элементом).
Con flexbox invece quando clickco sull'hamburger Menu basta cambiare la Dimensione della Sidebar */
display: flex;
/* Еще один вариант */
align-items: start;
}
a {
text-decoration: none;
}
/*#endregion BASE */
< br />/*#region SIDEBAR*/
/* Используемая позиция:липкая и вверху:0 слева:0 не видна */
header.sidebar {
позиция: исправлено;
переполнение-y: авто;
переполнение-x: видимое;
вверху: 0;
внизу: 0;
слева: 0;
фоновое изображение: линейный градиент (
30 градусов,
rgba(5, 5, 75, 0,85),
rgba(5, 5, 75, 0,85) 20%,
rgb(5, 5, 75)
);
высота: 100vh;
высота: 100svh;
ширина: 65 пикселей;
отступ: 0,4 rem 0,8 rem;
переход: все 0,5 с легкость;
/*#region SIDEBAR HEADER*/
.sidebar__header {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar__header__logo {
display: flex;
align-items: center;
display: none;
}
.sidebar__header__logo img {
ширина: 50 пикселей;
}
.sidebar__header__logo span {
цвет: белый;
}
.sidebar__header__hamburger {
курсор: col-resize;
маржа-топ: 0,4rem;
}
/*#endregion SIDEBAR HEADER */
/*#region SIDEBAR USER*/
.sidebar__user {
display: flex;
justify-content: center;
}
.sidebar__user__img {
ширина: 50 пикселей;
высота: 50 пикселей;
соответствие объекта: обложка;
граница: 3 пикселя сплошной rgb(182, 5, 152) );
border-top-color: rgb(23, 23, 201);
border-bottom-color: rgb(23, 23, 201);
border-radius: 50% ;
margin-top: 20px;
}
.sidebar__user__name {
display: none;
}
/* #endregion SIDEBAR USER*/
/*#region SIDEBAR MENU*/
.sidebar__menu__item {
min-height: 40px;
поля: 10px 0;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar__menu__item:hover {
border- радиус: 10 пикселей;
цвет фона: белый;
}
.sidebar__menu__item:hover .sidebar__menu__item__icon::before {
/* фоновое изображение: красный; */
фоновое изображение: линейный градиент(rgb(5, 5, 75), rgb(5, 5, 75));
размер шрифта: больше;
}
.sidebar__menu__item a {
позиция: относительная; /* Используется для позиционирования всплывающей подсказки */
display:block;
/* Следующие два правила используются, чтобы гарантировать, что тег
a идеально перекрывается с тегом li < br /> родительский элемент, чтобы кликабельная поверхность
ссылки увеличивалась и равнялась поверхности li */
width: 100%;
min-height: inherit;
display : flex;
justify-content: center;
align-items: center;
}
.sidebar__menu__item__text {
height: 3.2em;
min - ширина: 100 пикселей;
дисплей: нет;
размер шрифта: 1rem;
цвет фона: rgb(182, 5, 152);
фоновое изображение: линейный градиент (
вправо,
rgb(23, 23, 201),
rgb(182, 5, 152)
);
background-clip: text; < br /> -webkit-text-fill-color: Transparent;
}
/* Это правило действует как запасной вариант в случае -webkit-text-fill-color или background-clip: text;
не поддерживаются */
.sidebar__menu__item__icon {
color: rgb(23, 23, 201);
}
:is(. Sidebar__menu__item__icon, .sidebar__header__hamburger)::before {
фоновое изображение: линейный градиент(
вправо,
rgb(23, 23, 201),
rgb(182, 5) , 152)
);
background-clip: text;
-webkit-text-fill-color: Transparent;
}
.sidebar__menu__tooltip {
позиция: абсолютная;
справа: 0;
сверху: 50%;
/* 0,8rem — размер отступа правой боковой панели */
/* 10 пикселей — это расстояние, на котором я хочу разместить всплывающую подсказку
от края боковой панели */
Transform: Translate(calc(100% + 0.8rem + 10px), -50%);
цвет фона: белый;
радиус границы: 8 пикселей;
минимальная ширина: 75 пикселей;
выравнивание текста: по центру;
размер шрифта: 0,7 rem;
шрифт-вес: 500;
семейство шрифтов: "Segoe UI", Tahoma, Женева, Вердана, без засечек;
отступ: 5 пикселей;
межбуквенный интервал: -0,2 пикселя ;
отображение: нет;
цвет: rgb(5, 5, 75);
}
.sidebar__menu__item a:hover .sidebar__menu__tooltip {
display : блок;< br />}
/*#endregion SIDEBAR MENU*/
/*#region SIDEBAR INPUT*/
input#sidebar-toggle {
отображение: нет;
>
input#sidebar-toggle:checked + header.sidebar {
ширина: 250 пикселей;
}
/*#endregion SIDEBAR INPUT*/
/*#endregion SIDEBAR*/
/*#region MAIN */
/* input#sidebar-toggle: проверено ~ main.main-content {
} */
main.main-content {
flex-grow: 1;
}
/* #endregion MAIN */
/* для устройств, не поддерживающих наведение, добавляю фокус и актив для перехвата касания.
Таким образом, всплывающая подсказка будет появляться при касании (длительное касание).
Поэтому вместо наведения я добился щелчка, но меня это устраивает
Это решение может не подойти работают для мобильных браузеров Edge, для которых необходимо добавить в html
aria-haspopup="true" */
/* В этом случае медиа-запрос @media all и (hover: none) не требуется, потому что в противном случае, если вы удерживаете
пункт меню, всплывающее окно активируется и остается открытым (поскольку оно активно) и останется открытым, пока вы не щелкнете в другом месте.
Чтобы понять это, попробуйте код на компьютер с помощью мыши, удалив медиа-запрос @media all и (наведите курсор: none)
Обратите внимание, что мы игнорируем другие указывающие устройства (например, стилусы)
*/
@ media all и (hover: none) {
.sidebar__menu__item a:focus .sidebar__menu__tooltip,
.sidebar__menu__item a:active .sidebar__menu__tooltip {
цвет фона: красный;
дисплей: блок ;
Я создал вертикальное меню и хочу расширить его по всей высоте области просмотра, но если этого недостаточно, чтобы вместить его, мне нужен какой-то механизм прокрутки (на странице или в вертикальном меню это нормально). в обоих случаях), что позволяет мне это сделать. Я попробовал несколько способов, но не смог добиться желаемого эффекта. С помощью этого решения[code]header.sidebar[/code] is [code]position:sticky[/code] and I can see all the vertical menu when I scroll on the body, but only when I have scrolled a lot and this isn't user friendly. This isn't acceptable.
[code]/*#region BASE */ @import url("https://fonts.googleapis.com/css2?family=Anta&family=Madimi+One&display=swap");
/* Non uso gridbox perchè gridbox imposta la dimensione delle colonne nell'elemento genitore(quindi qui nel body) con la proprietà grid-template-columns e non riuscirei con il meccanismo dell'input:checkbox a cambiarne la dimensione (perchè non posso selezionare il body quando l'input è checked perchè il body è l'elemento genitore). Con flexbox invece quando clickco sull'hamburger Menu basta cambiare la Dimensione della Sidebar */ display: flex; /* Еще один вариант */ align-items: start; }
.sidebar__menu__item a { позиция: относительная; /* Используется для позиционирования всплывающей подсказки */ display:block;
/* Следующие два правила используются, чтобы гарантировать, что тег a идеально перекрывается с тегом li < br /> родительский элемент, чтобы кликабельная поверхность ссылки увеличивалась и равнялась поверхности li */ width: 100%; min-height: inherit; display : flex; justify-content: center; align-items: center; } .sidebar__menu__item__text { height: 3.2em; min - ширина: 100 пикселей; дисплей: нет; размер шрифта: 1rem; цвет фона: rgb(182, 5, 152); фоновое изображение: линейный градиент ( вправо, rgb(23, 23, 201), rgb(182, 5, 152) ); background-clip: text; < br /> -webkit-text-fill-color: Transparent; }
/* Это правило действует как запасной вариант в случае -webkit-text-fill-color или background-clip: text; не поддерживаются */ .sidebar__menu__item__icon { color: rgb(23, 23, 201); }
/* для устройств, не поддерживающих наведение, добавляю фокус и актив для перехвата касания. Таким образом, всплывающая подсказка будет появляться при касании (длительное касание). Поэтому вместо наведения я добился щелчка, но меня это устраивает Это решение может не подойти работают для мобильных браузеров Edge, для которых необходимо добавить в html aria-haspopup="true" */
/* В этом случае медиа-запрос @media all и (hover: none) не требуется, потому что в противном случае, если вы удерживаете пункт меню, всплывающее окно активируется и остается открытым (поскольку оно активно) и останется открытым, пока вы не щелкнете в другом месте. Чтобы понять это, попробуйте код на компьютер с помощью мыши, удалив медиа-запрос @media all и (наведите курсор: none)
Обратите внимание, что мы игнорируем другие указывающие устройства (например, стилусы) */ @ media all и (hover: none) { .sidebar__menu__item a:focus .sidebar__menu__tooltip, .sidebar__menu__item a:active .sidebar__menu__tooltip { цвет фона: красный; дисплей: блок ; [/code] [code]
body { фоновое изображение: url("https://i.ibb.co/gDgZ3c9/background-Template.png"); размер фона: обложка; прикрепление фона: исправлено; семейство шрифтов : "Anta", sans-serif;
/* Я не использую GridBox, потому что Gridbox устанавливает размер столбцов в родительском элементе (следовательно, здесь, в теле) с помощью Grid-template-property столбцов, и я не смогу изменить их размер с помощью механизма input:checkbox (потому что я не могу выбрать тело, когда вход проверен, потому что тело является родительским элементом). Con flexbox invece quando clickco sull'hamburger Menu basta cambiare la Dimensione della Sidebar */ display: flex; /* Еще один вариант */ align-items: start; }
.sidebar__menu__item a { позиция: относительная; /* Используется для позиционирования всплывающей подсказки */ display:block;
/* Следующие два правила используются, чтобы гарантировать, что тег a идеально перекрывается с тегом li < br /> родительский элемент, чтобы кликабельная поверхность ссылки увеличивалась и равнялась поверхности li */ width: 100%; min-height: inherit; display : flex; justify-content: center; align-items: center; } .sidebar__menu__item__text { height: 3.2em; min - ширина: 100 пикселей; дисплей: нет; размер шрифта: 1rem; цвет фона: rgb(182, 5, 152); фоновое изображение: линейный градиент ( вправо, rgb(23, 23, 201), rgb(182, 5, 152) ); background-clip: text; < br /> -webkit-text-fill-color: Transparent; }
/* Это правило действует как запасной вариант в случае -webkit-text-fill-color или background-clip: text; не поддерживаются */ .sidebar__menu__item__icon { color: rgb(23, 23, 201); }
/* для устройств, не поддерживающих наведение, добавляю фокус и актив для перехвата касания. Таким образом, всплывающая подсказка будет появляться при касании (длительное касание). Поэтому вместо наведения я добился щелчка, но меня это устраивает Это решение может не подойти работают для мобильных браузеров Edge, для которых необходимо добавить в html aria-haspopup="true" */
/* В этом случае медиа-запрос @media all и (hover: none) не требуется, потому что в противном случае, если вы удерживаете пункт меню, всплывающее окно активируется и остается открытым (поскольку оно активно) и останется открытым, пока вы не щелкнете в другом месте. Чтобы понять это, попробуйте код на компьютер с помощью мыши, удалив медиа-запрос @media all и (наведите курсор: none)
Обратите внимание, что мы игнорируем другие указывающие устройства (например, стилусы) */ @ media all и (hover: none) { .sidebar__menu__item a:focus .sidebar__menu__tooltip, .sidebar__menu__item a:active .sidebar__menu__tooltip { цвет фона: красный; дисплей: блок ; [/code] [code]
[*] [url=. ./../index.html] [i][/i] Главная Главная [/url]
[/list]
ПАНЕЛЬ ИНФОРМАЦИИ
< /html>[/code]
У меня есть (с[code]position:fixed[/code] and [code]overflow-y:auto[/code] and [code]overflow-x:visible[/code]) the vertical scrollbar on my vertical menu however I have an horizontal scrollbar too. I could hide it with [code]overflow-x:hidden[/code] but in this way the tooltip that appears (on the right side of vertical menu) on [code]:hover[/code] on an item menu isn't visible anymore. Вместо этого с видимой горизонтальной полосой прокрутки (без[code]overflow-x:hidden[/code]) this tooltip is inglobated inside the sidebar menu and visible only with horizontal scroll. This make me crazy. How could I resolve?
Мобильная версия