[英]HTML/CSS: What is the right way to make sticky menus?
我正在嘗試制作一個包含標題和水平菜單的頁面。 在其下方的左側應該是一個粘性的垂直菜單。 頁面的其余部分應該是內容。 要給它一個圖片：
為此，我嘗試使用網格，然后使用固定位置，絕對位置或相對位置的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";
}
}
}
但是現在，我遇到了一個問題，即手風琴的按鈕應該跨越屏幕的剩余寬度。 但是，它似乎僅跨越按鈕文本的寬度。 如果我在CSS中將包含元素（內容類）的寬度設置為100％，則這超出了窗口的寬度。 我假設這樣做是因為我固定了橫幅和導航欄的位置，然后將內容放置在應該顯示的位置，並用絕對位置偏移了它。 但是，這只會改變它而不是“填充剩余空間”。 因此，如果我將寬度強制為100％，則將占用屏幕寬度的100％，因此在屏幕之外留下了大塊偏移。
由於我遇到了很多這樣的問題，每次修復一個問題時，我最終都會遇到另一個問題，這使我懷疑自己是在錯誤地解決所有問題。 有沒有更好的方法來制作粘性和非粘性組件，使它們仍然充滿空間而不會溢出呢？ 感覺一個人應該能夠將屏幕上專門用於某些任務的部分切開，在這些部分的內部，只需填充自己的HTML頁面，這樣一處的內容就不會影響另一處的內容（除非明確指示）。 網格可以做到這一點，但是當我嘗試使用網格進行工作時，它們似乎並沒有真正允許您用所需的任何東西填充網格單元-如果內容太大，或者您想要它很粘，會打亂其余的布局。
對於粘性頂部欄
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
的CSS
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 60px;
}
對於粘性豎線，您可以使用它。
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Page content -->
<div class="main">
...
</div>
CSS
/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
如何僅使用 HTML 和 CSS（無 JS）制作“粘性”導航欄？
[英]How to make a “sticky” navbar using only HTML and CSS (without JS)?
在express / jade文件中設置JS和CSS路徑的正確方法是什么？
[英]What is the right way to set JS and CSS paths in express/jade file?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.