Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

HTML, CSS - Меню не во всю страницу, обрывается из-за Div, как сделать так чтобы Меню был поверх всех Div контейнеров?

Чингис Кун Ученик (99), на голосовании 6 месяцев назад
Есть код на html, css и js. Проблема заключается в том что "Меню" слева не распространяется во весь экран или body, "Меню обрывается".
 * { 
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--index: calc(1vw + 1vh);
--color-header: #f4efec;
--color-text: #cdc6c3;
--gallery-gap: calc(var(--index) * 10);
}
.content, .hero, .main-header, .gallery > * {
will-change: transform;
}
.hero {
width: calc(var(--index) * 36);
position: absolute;
left: 37vw;
top: 8vh;
z-index: -1;
}
.container {
padding: 0 7vw;
}
.gallery {
display: flex;
padding: calc(var(--index) * 8) 0;
}
.gallery > * {
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
}
.gallery_item {
max-width: calc(var(--index) * 25);
margin-bottom: var(--gallery-gap);
max-height: 180vh;
border-radius: 8px;
}
.gallery__left {
margin-top: calc(var(--gallery-gap) * 1.75);
}
.gallery__right .gallery_item {
margin: 0;
margin-top: var(--gallery-gap);
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background: url(../img/bg.jpg);
background-size: 50px;
color: #fafafa;
font-family: raleway-c;
overflow-x: hidden;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}

header nav ul {
list-style: none;
}

header nav ul li {
display: inline;
margin: 0 10px;
}

main {
padding: 2rem;
}

section {
margin-bottom: 2rem;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem;
}


a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}

a:hover {
color: #0044cc;
}


.title h1{
font-size: 40px;
margin-bottom: 50px;
color: #fcfffc;
}

.title span{
color: #f5b7c7;
}

.list__menu a{
font-family: outfit-c;
font-size: 24px;
color: #fcfffc;
border-left: 2px solid #f5b7c7;
padding-left: 5px;
transition: all 0.2s ease;
}

.list__menu a:hover{
border-left: 2px solid #f5b7c7;
padding-left: 10px;
transition: all 0.2s ease;
}

.list__menu li{
margin: 20px 0;
}

.menu {
padding: 25vh 50px;
position: fixed;
background: rgba(20, 20, 20, 0.5);
height: 100vh;
backdrop-filter: blur(16px);
border-right: 7px solid #fcfffc;
left: -211px;
transition: all 0.2s ease;
}

.menu:hover{
left: 0;
transition: all 0.2s ease;
}
 const menu = document.querySelector('#menu'); 
const open__menu = document.querySelector('#open__menu');

menu.addEventListener('click', () => {
open__menu.classList.toggle('disp');
})
Дополнен 7 месяцев назад
А и ещё есть проблема отступа от header контейнером

<div class="portfolio">Основной контент </div>
Дополнен 7 месяцев назад
Голосование за лучший ответ
Вася Пупкин Мудрец (14944) 7 месяцев назад
z-index: 1000000000 или сколько угодно. это нужно в стилях для класса .menu написать
Чингис КунУченик (99) 7 месяцев назад
А это не испортит все остальное?
Чингис Кун Ученик (99) Чингис Кун, подумал что где-то поправить надо.
Чингис КунУченик (99) 7 месяцев назад
Аааа то есть этот код добавить в класс menu в css?
Чингис КунУченик (99) 7 месяцев назад
не получилось(
 .menu { 
padding: 25vh 50px;
position: fixed;
background: rgba(20, 20, 20, 0.5);
height: 100vh;
backdrop-filter: blur(16px);
border-right: 7px solid #fcfffc;
left: -211px;
transition: all 0.2s ease;
z-index: 1000000;
}
Вася Пупкин Мудрец (14944) Чингис Кун, так ширину то добавить нужно, чтобы растягивалось. z-index организует порядок отрисовки и чем больше значение, тем выше находится элемент
Чингис КунУченик (99) 7 месяцев назад
или это у самого класса menu?
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (266046) 7 месяцев назад
компоновку отработай, а потом уже заполняй контейнеры менюшками, и никаких проблем с ними не будет вообще

Здесь посмотри;
https://bulletproof-password.web.app/grid-layout-001.html
Чингис КунУченик (99) 7 месяцев назад
По туториалу делал, хотел свое добавить.
Похожие вопросы