首頁猿問 CSS...

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

JavaScript

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

我試圖將這兩個導航欄和粘性響應結合起來這個想法是結合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條經驗獲得超5個贊

#navbar {

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

background-color: #333;

}

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

但是，當您向下滾動時，的類別與.sticky一起出現#nav，就會overflow: hidden;出現問題。因為.stickyis fixed& width: 100%;no mention of ，height這就是為什么內容.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>

反對回復 2023-05-11

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

更改下拉內容的位置。

dropdown-content : relative;

并相應地調整其他CSS。事情是您的下拉內容正在工作，但下拉列表的位置在窗口中不相關。如果您在單擊后向上滾動。你可以看到你的下拉內容。

反對回復 2023-05-11

2 回答
0 關注
137 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

CSS 菜單，當內容較長時，下拉菜單在桌面視圖上不起作用

CSS 菜單，當內容較長時，下拉菜單在桌面視圖上不起作用

2 回答

添加回答

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

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