Я пытаюсь сделать страницу, которая имеет заголовок и липкое горизонтальное меню. Под этим, слева, должно быть липкое вертикальное меню. Остальная часть страницы должна быть содержательной. Чтобы дать это на рисунке:
Для достижения этой цели я попытался использовать сетки, затем элементы div, которые были в фиксированной, абсолютной или относительной позиции и т. Д. Пока лучшее, что я придумал после просмотра множества примеров, это:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<div class="header">
<h1>Banner</h1>
<p>Subtitle</p>
<div class="breadcrumbs">
<a class="menuitem button disabled">></a>
</div>
</div>
<div class="verticalMenu">
<a href="#" class="menuitem">Home</a><br>
<a href="#" class="menuitem">Map</a><br>
<a href="#" class="menuitem">1. </a><br>
<a href="#" class="menuitem">2. </a><br>
<a href="#" class="menuitem">3. </a><br>
<a href="#" class="menuitem">4. </a><br>
</div>
<div class="content" style="">
<button class="accordion">Intro</button>
<div class="panel">
<button class="accordion">Summary</button>
<div class="panel">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, porro, beatae. Accusantium veniam iure quaerat temporibus ex, nam impedit! Voluptatem suscipit natus eligendi, consectetur ratione porro, facere iusto perferendis harum.</span>
<span>Accusamus praesentium dolore eveniet adipisci non, molestias ut repudiandae sunt. Libero modi in dignissimos dolore cumque mollitia possimus maiores repudiandae dolorum praesentium. Minima repudiandae inventore dolores numquam vitae, ipsa accusantium!</span>
<span>Eveniet magni tenetur similique quo possimus aperiam illo. Consectetur exercitationem delectus quibusdam ducimus possimus adipisci soluta ipsam iure animi, nisi, laborum autem doloremque nemo iste voluptatum explicabo quaerat! Hic, illo!</span>
<span>Eos quidem enim corrupti voluptates nesciunt temporibus, illum explicabo velit totam tempore ad eius, soluta. Ipsa velit recusandae in voluptates, numquam aperiam labore nobis non, fugiat qui? Similique, omnis, natus.</span>
<span>Quam, nulla, minus ipsum consectetur nesciunt veniam illum magnam facere, debitis fugit atque nihil tenetur. Animi a sit soluta in officia error? Quisquam reprehenderit repellendus facilis optio reiciendis soluta iste.</span>
<span>Recusandae quis molestias error in ab, labore quas officiis tempore omnis, beatae, corporis iste consequuntur veritatis. Debitis, veniam voluptatibus molestias dignissimos corporis, magni esse saepe harum rem dolorem neque fugiat.</span>
<span>Officia quo voluptatem ipsum, dolorum quisquam unde illum accusantium velit quidem similique magnam. Tempora, reprehenderit, veritatis! Incidunt neque, perferendis magnam, itaque vel sunt veniam consectetur vitae libero ipsam, dignissimos asperiores!</span>
<span>Quibusdam quae, incidunt accusamus sed cumque maxime reiciendis optio quasi similique, fugit, non facere placeat tempora. Ipsa, ea, dolorum! Labore nesciunt, distinctio inventore dolor ullam sint saepe incidunt enim molestias.</span>
<span>Placeat quod nulla, soluta distinctio quis consequuntur earum dicta quae rerum magnam tenetur iste nesciunt ab facilis eum suscipit, reprehenderit molestias repudiandae, repellendus adipisci eaque aperiam. Praesentium adipisci itaque quidem!</span>
<span>Error in, veritatis earum sit dignissimos numquam? Minus voluptatem, soluta blanditiis voluptatibus tenetur sapiente reprehenderit cupiditate impedit sed, consectetur fuga recusandae inventore, harum voluptates porro deserunt? Quae vero, necessitatibus dolorum?</span></p>
</div>
<button class="accordion">Section</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<script type="text/javascript" src="../js/layout.js"></script>
</body>
</html>
CSS
.content {
position: relative;
top: 150px;
left: 100px;
z-index: 1;
margin-bottom: 180px;
width: auto;
}
.verticalMenu {
display: inline-block;
position: fixed;
left: 0;
top: 150px;
width: 100px;
height: 100%;
}
.header {
position: fixed;
z-index: 100;
top: 0px !important;
width: 100%;
background: white;
}
.button {
background-color: blue;
color: white;
}
.breadcrumbs {
background-color: green;
position: fixed;
top: 110px;
left: 5px;
width: 100%;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
.test {
position: absolute;
top: 150px;
left: 100px;
z-index: 1;
margin-bottom: 180px;
}
JavaScript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
Но сейчас я сталкиваюсь с проблемой, что кнопка для аккордеона должна охватывать оставшуюся ширину экрана. Тем не менее, кажется, что он охватывает только ширину текста кнопки. Если я установлю ширину на 100% в CSS для содержащего элемента (класса содержимого), то это будет превышать ширину окна. Я предполагаю, что это происходит потому, что я сделал баннеры и навигационные панели с фиксированной позицией, а затем, чтобы поместить контент туда, где он должен появиться, я сместил его с абсолютной позицией. Однако это просто сдвигает его, а не «заполняет оставшееся пространство». Поэтому, если я установлю ширину на 100%, это займет 100% ширины экрана и, следовательно, оставит смещение фрагмента за пределами экрана.
Так как я столкнулся с большим количеством подобных проблем, и каждый раз, когда я исправляю одну, я в конечном итоге сталкиваюсь с другой, это заставляет меня подозревать, что я просто неправильно подхожу к этому. Есть ли лучший способ сделать липкие и нелипкие компоненты, чтобы они по-прежнему заполняли пространство, не выполняя его? Такое ощущение, что нужно иметь возможность вырезать части экрана, предназначенные для определенных задач, а внутри этих частей просто заполнить их собственной HTML-страницей, чтобы содержимое в одном месте не влияло на содержимое в другом (если только специально проинструктировано). Сетки вроде как делают это, но, как я пытался сделать эту работу с сетками, они не позволяют вам заполнять ячейки сетки чем-то, что вы хотите - если контент слишком большой или если вы хотите это быть липким, это нарушает остальную часть макета.