首頁猿問 CSS...

CSS 菜單，當內(nèi)容較長時，下拉菜單在桌面視圖上不起作用

JavaScript

皈依舞 2023-05-11 13:55:44

我試圖將這兩個導(dǎo)航欄和粘性響應(yīng)結(jié)合起來這個想法是結(jié)合https://www.w3schools.com/howto/howto_js_navbar_sticky.asp 和https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp到目前為止它運行良好，請參見下面的示例。function myFunction2() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }}window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); }}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p></div><div id="navbar"><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="myFunction2()">☰</a></div></div>

查看完整描述

2 回答

慕工程0101907

TA貢獻1887條經(jīng)驗獲得超5個贊

#navbar {

overflow: hidden; /* remove this line & that's it, problem solved, see the example below */

background-color: #333;

}

當#nav單獨的時候，我的意思是它沒有類，overflow: hidden;那么不會有任何問題。

但是，當您向下滾動時，的類別與.sticky一起出現(xiàn)#nav，就會overflow: hidden;出現(xiàn)問題。因為.stickyis fixed& width: 100%;no mention of ，height這就是為什么內(nèi)容.dropdown-content不可見的原因，它在那里，但是隱藏了，因為它從#navbar.sticky

function myFunction2() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function myFunction() {

if (window.pageYOffset >= sticky) {

navbar.classList.add("sticky")

} else {

navbar.classList.remove("sticky");

}

#navbar .topnav {

overflow: hidden;

background-color: #333;

}

#navbar .topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.active {

background-color: #4CAF50;

color: white;

}

#navbar .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!important;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

#navbar .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) {

#navbar .topnav a:not(:first-child), .dropdown .dropbtn {

display: none;

}

#navbar .topnav a.icon {

float: right;

display: block;

}

@media screen and (max-width: 600px) {

#navbar .topnav.responsive {position: relative;}

#navbar .topnav.responsive .icon {

position: absolute;

right: 0;

top: 0;

}

#navbar .topnav.responsive a {

float: none;

display: block;

text-align: left;

}

#navbar .topnav.responsive .dropdown {float: none;}

#navbar .topnav.responsive .dropdown-content {position: relative;}

#navbar .topnav.responsive .dropdown .dropbtn {

display: block;

width: 100%;

text-align: left;

}

.header {

background-color: #f1f1f1;

padding: 30px;

text-align: center;

}

#navbar {

/* overflow: hidden; remove this */

background-color: #333;

}

#navbar a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

#navbar a:hover {

background-color: #ddd;

color: black;

}

#navbar a.active {

background-color: #4CAF50;

color: white;

}

.content {

padding: 16px;

}

.sticky {

position: fixed;

top: 0;

width: 100%;

}

.sticky + .content {

padding-top: 60px;

}

<h2>Scroll Down</h2>

<p>Scroll down to see the sticky effect.</p>

</div>

<a href="#contact">Contact</a>

<button class="dropbtn">Dropdown

</button>

</div>

<a href="#about">About</a>

</div>

<h3>Sticky Navigation Example</h3>

<p>The navbar will stick to the top when you reach its scroll position.</p>

<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</div>

反對回復(fù) 2023-05-11