帶有 3 行下拉菜單的粘性響應式頂部導航欄
[英]Sticky responsive top navigation bar with 3-line dropdown menu
問題描述
我有一個簡單的粘性響應頂部導航欄，帶有 3 行下拉菜單。
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; font-family: inherit }.header { font-family: Consolas, Helvetica, sans-serif, Arial; padding: 20px; text-align: center; background-image: linear-gradient(to right, #000a98, #00B8FF); color: white; font-size: 15px; }.topnav { overflow: hidden; background-color: #333; background-image: linear-gradient(to right, #000a98, #00B8FF); }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.active { background-image: linear-gradient(to right, #000a98, #00B8FF); color: white; }.topnav.icon { display: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; }.dropdown-content a:hover { background-color: #ddd; color: black; }.dropdown:hover.dropdown-content { display: block; } @media screen and (max-width: 600px) {.topnav a:not(:first-child), .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) {.topnav.responsive { position: relative; }.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; }.topnav.responsive.dropdown { float: none; }.topnav.responsive.dropdown-content { position: relative; }.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: left; } }.content { padding: 16px; }.sticky { position: fixed; top: 0; width: 100%; }.sticky+.content { padding-top: 60px; } </style> </head> <body> <div class="header">hhvvvvvvvvv </div> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } window.onscroll = function () { myFunction() }; var navbar = document.getElementById("myTopnav"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } window.addEventListener('scroll', stickyNavigation); </script> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </body> </html>
要查看上述代碼的現場演示，請單擊 此處一切都很好，但下拉菜單不起作用。 在我嘗試使導航欄變粘之前，下拉菜單運行良好，但在使導航欄變粘后我遇到了這個問題。
2 個解決方案
解決方案1
2 2020-11-14 06:57:43
替換position: absolute; 使用position: fixed;
.dropdown-content {
display: none;
position: fixed; /* <------------- */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
例子：
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; font-family: inherit }.header { font-family: Consolas, Helvetica, sans-serif, Arial; padding: 20px; text-align: center; background-image: linear-gradient(to right, #000a98, #00B8FF); color: white; font-size: 15px; }.topnav { overflow: hidden; background-color: #333; background-image: linear-gradient(to right, #000a98, #00B8FF); }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.active { background-image: linear-gradient(to right, #000a98, #00B8FF); color: white; }.topnav.icon { display: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; }.dropdown-content a:hover { background-color: #ddd; color: black; }.dropdown:hover.dropdown-content { display: block; } @media screen and (max-width: 600px) {.topnav a:not(:first-child), .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) {.topnav.responsive { position: relative; }.topnav.responsive.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; }.topnav.responsive.dropdown { float: none; }.topnav.responsive.dropdown-content { position: relative; }.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: left; } }.content { padding: 16px; }.sticky { position: fixed; top: 0; width: 100%; }.sticky+.content { padding-top: 60px; } </style> </head> <body> <div class="header">hhvvvvvvvvv </div> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } window.onscroll = function () { myFunction() }; var navbar = document.getElementById("myTopnav"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } //window.addEventListener('scroll', stickyNavigation); </script> <div style="padding-left:16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> </body> </html>
解決方案2
0 已采納 2022-03-13 17:38:49
基於以前版本的答案，我找到了當我們不在頁面頂部時單擊 3 行菜單下拉菜單（實際上稱為漢堡包）的原因。
這是因為在您的媒體查詢中，您將.topnav.responsive class 設置為position: relative ，這會在頁面頂部打開您的菜單，而不是我們期望的位置。
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative; <--- This was causing the issue
}
要解決此問題，您需要做的就是在此處.topnav.responsive class。
另外，在提供的腳本中，並沒有考慮我們添加的sticky CSS class。 您構建的示例僅動態使用responsive式 class 並且沒有檢查負責將導航欄保持在用戶顯示中的動態sticky class。 要解決這個問題，我們需要編輯腳本的邏輯。
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") { // this is only checking for responsiveness and not checking when the topnav has the `sticky` class
x.className += " responsive";
} else {
x.className = "topnav";
}
}
為了解決這個問題，我更新了邏輯以僅檢查頂部導航是否附加了responsive式 class。
function reactiveTopNav() {
const topNav = document.getElementById('myTopnav');
// checks if the topnav already has the class 'responsive'
// if it does, remove it, else, add it in
// this only checks for `responsive` and not any other class
topNav.classList.contains('responsive')
? topNav.classList.remove('responsive')
: topNav.classList.add('responsive');
}
把它放在一起，這就是我所擁有的
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <style>.topnav { overflow: hidden; background-color: #333; background-image: linear-gradient(to right, #000a98, #00b8ff); }.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.active { background-image: linear-gradient(to right, #000a98, #00b8ff); color: white; }.topnav.icon { display: none; }.dropdown { float: left; overflow: hidden; }.dropdown.dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }.dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.topnav a:hover, .dropdown:hover.dropbtn { background-color: #555; color: white; }.dropdown-content a:hover { background-color: #ddd; color: black; }.dropdown:hover.dropdown-content { display: block; } @media screen and (max-width: 600px) {.topnav a:not(:first-child), .dropdown.dropbtn { display: none; }.topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { /*.topnav.responsive { position: relative; } */.topnav.responsive.icon { position: fixed; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; }.topnav.responsive.dropdown { float: none; }.topnav.responsive.dropdown-content { position: relative; }.topnav.responsive.dropdown.dropbtn { display: block; width: 100%; text-align: left; } } body { padding-top: 16px; }.sticky { position: fixed; top: 0; width: 100%; }.sticky+body { padding-top: 60px; } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <div class="dropdown"> <button class="dropbtn"> Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#about">About</a> <a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="reactiveTopNav()">☰</a > </div> <script> function reactiveTopNav() { const topNav = document.getElementById("myTopnav"); topNav.classList.contains("responsive")? topNav.classList.remove("responsive"): topNav.classList.add("responsive"); } window.onscroll = function () { stickyTopNav(); }; var navbar = document.getElementById("myTopnav"); var sticky = navbar.offsetTop; function stickyTopNav() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } </script> <div style="padding-left: 16px"> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> <h2>Responsive Topnav with Dropdown</h2> <p>Resize the browser window to see how it works.</p> <p>Hover over the dropdown button to open the dropdown menu.</p> </div> </body> </html>
粘性導航在響應性方面躍居首位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.