首页猿问 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 关注
115 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

CSS 菜单，当内容较长时，下拉菜单在桌面视图上不起作用

CSS 菜单，当内容较长时，下拉菜单在桌面视图上不起作用

2 回答

添加回答