问题：
添加弹出菜单后，其余内容消失，溢出-x:hidden不起作用
郎鸿雪
添加弹出菜单后，“main”内部的内容消失，正文的溢出-x:hidder不起作用。有人知道为什么吗？
null
const slide = () => {
const burger = document.querySelector(".burger");
const menu = document.querySelector(".menu");
const links = document.querySelectorAll(".menu div");
//Toggle Menu
burger.addEventListener("click", () => {
menu.classList.toggle("menupop");
})
}
slide();* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: calc(16px + 0.25vw);
overflow: scroll;
font-family: 'Antic Slab', serif;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
main {
display: grid;
width: 100vw;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50% 50% 50%;
}
header {
grid-column: 1/3;
grid-row: 1/2;
background-color: pink;
}
#rose {
grid-column: 1/2;
grid-row: 2/3;
background-color: hotpink;
}
#rose-img {
grid-column: 2/3;
grid-row: 2/3;
background-color: rgb(134, 184, 204);
}
#tree {
grid-column: 1/3;
grid-row: 3/4;
background-color: lawngreen;
}
#about-us {
grid-column: 1/2;
grid-row: 4/5;
background-color: lightcoral;
}
#contact-us {
grid-column: 2/3;
grid-row: 4/5;
background-color: orange;
}
.burger {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
width: 50px;
height: 50px;
cursor: pointer;
display: none;
}
.line1,
.line2,
.line3 {
flex: 1 1 1;
width: 80%;
height: 5%;
background: black;
border-radius: 5px;
box-shadow: 1px 1px grey;
transition: all .5s ease-in-out;
}
.a {
transform: translateY(2px);
}
.b {
transform: translateY(-2px);
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
background-color: rgb(245, 249, 250, 0.5);
padding: 5px 10px;
position: sticky;
top: 0;
}
ul {
display: flex;
list-style: none;
justify-content: space-around;
width: 40%
}
li a {
text-decoration: none;
color: grey;
}
.logo {
font-family: 'Italianno', cursive;
margin-right: auto;
font-size: 30px;
font-weight: bold;
}
.menu {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: rgba(91, 126, 172, 0.5);
height: 100vh;
width: 50vw;
position: absolute;
top: 50px;
right: 0;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.menupop {
transform: translateX(0%);
}
.menupop div {
animation-name: menuFade;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.menu div {
width: 100%;
height: 20%;
background-color: rgb(245, 249, 250, 0.6);
margin-bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(100%);
}
.menu div a {
text-decoration: none;
}
@keyframes menuFade {
from {
transform: translateX(100%);
}
to {
transform: translateX(0px);
}
}
@media only screen and (max-width: 600px) {
ul {
width: 60%;
}
}
@media only screen and (max-width: 430px) {
.burger {
display: flex;
}
ul {
display: none;
}
}<body>
<nav>
<div class="logo">Logo</div>
<ul>
<li><a href="#">Flower</a></li>
<li><a href="#">Tree</a></li>
<li><a href="#">About us</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="menu">
<div class="first"><a href="#">Flower</a></div>
<div class="second"><a href="#">Tree</a></div>
<div class="third"><a href="#">About us</a></div>
</div>
<main>
<header id="jumbotron">
</header>
<section id="rose">
</section>
<section id="rose-img">
</section>
<section id="tree">
<div class="privacy">
</div>
<div class="hedge">
</div>
</section>
<section id="about-us">
</section>
<section id="contact-us">
</section>
</main>
</body>null
共有1个答案
东郭凯捷
在CSS中，删除overflow:scroll；。
这应该可以防止侧边菜单停留在视区宽度之外，因为使用Overflow:Scroll；，您将允许浏览器将侧边菜单置于视区之外，使其只能通过滚动来访问。
我还想补充一下，你的侧边菜单过渡太长了。如果从用户体验的角度考虑，用户可能会认为您的站点速度很慢。我已经将过渡缩短到200ms，并删除了动画-持续时间和动画-延迟。现在它似乎对用户的反应更快了。
null
const slide = () => {
const burger = document.querySelector(".burger");
const menu = document.querySelector(".menu");
const links = document.querySelectorAll(".menu div");
//Toggle Menu
burger.addEventListener("click", () => {
menu.classList.toggle("menupop");
})
}
slide();* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: calc(16px + 0.25vw);
font-family: 'Antic Slab', serif;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
main {
display: grid;
width: 100vw;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50% 50% 50%;
}
header {
grid-column: 1/3;
grid-row: 1/2;
background-color: pink;
}
#rose {
grid-column: 1/2;
grid-row: 2/3;
background-color: hotpink;
}
#rose-img {
grid-column: 2/3;
grid-row: 2/3;
background-color: rgb(134, 184, 204);
}
#tree {
grid-column: 1/3;
grid-row: 3/4;
background-color: lawngreen;
}
#about-us {
grid-column: 1/2;
grid-row: 4/5;
background-color: lightcoral;
}
#contact-us {
grid-column: 2/3;
grid-row: 4/5;
background-color: orange;
}
.burger {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
width: 50px;
height: 50px;
cursor: pointer;
display: none;
}
.line1,
.line2,
.line3 {
flex: 1 1 1;
width: 80%;
height: 5%;
background: black;
border-radius: 5px;
box-shadow: 1px 1px grey;
transition: all .5s ease-in-out;
}
.a {
transform: translateY(2px);
}
.b {
transform: translateY(-2px);
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
background-color: rgb(245, 249, 250, 0.5);
padding: 5px 10px;
position: sticky;
top: 0;
}
ul {
display: flex;
list-style: none;
justify-content: space-around;
width: 40%
}
li a {
text-decoration: none;
color: grey;
}
.logo {
font-family: 'Italianno', cursive;
margin-right: auto;
font-size: 30px;
font-weight: bold;
}
.menu {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: rgba(91, 126, 172, 0.5);
height: 100vh;
width: 50vw;
position: absolute;
top: 50px;
right: 0;
transform: translateX(100%);
transition: transform 200ms ease-in;
}
.menupop {
transform: translateX(0%);
}
.menupop div {
animation-name: menuFade;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
.menu div {
width: 100%;
height: 20%;
background-color: rgb(245, 249, 250, 0.6);
margin-bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(100%);
}
.menu div a {
text-decoration: none;
}
@keyframes menuFade {
from {
transform: translateX(100%);
}
to {
transform: translateX(0px);
}
}
@media only screen and (max-width: 600px) {
ul {
width: 60%;
}
}
@media only screen and (max-width: 430px) {
.burger {
display: flex;
}
ul {
display: none;
}
}<body>
<nav>
<div class="logo">Logo</div>
<ul>
<li><a href="#">Flower</a></li>
<li><a href="#">Tree</a></li>
<li><a href="#">About us</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="menu">
<div class="first"><a href="#">Flower</a></div>
<div class="second"><a href="#">Tree</a></div>
<div class="third"><a href="#">About us</a></div>
</div>
<main>
<header id="jumbotron">
</header>
<section id="rose">
</section>
<section id="rose-img">
</section>
<section id="tree">
<div class="privacy">
</div>
<div class="hedge">
</div>
</section>
<section id="about-us">
</section>
<section id="contact-us">
</section>
</main>
</body>
类似资料：
-
我有一个组件（Widget——扩展了JPanel），我在上面实现了一个简单的弹出菜单。当点击面板的边框时，它会起作用，基本上除了面板布局包含面板内其他组件的地方之外，其他地方都会起作用。 因此，如果面板中有一个JTable，我可以在单击旁边的菜单时调用它（如果没有其他内容），但是当单击JTable时，什么也不会发生（表显然位于面板顶部，阻止MouseAdapter注册单击）。 我能以某种方式在右键
-
我的应用程序有问题。。。溢出菜单不可见！我可以点击手机的右上角，菜单项就会显示出来，但这三个点并没有显示出来。 这是我的xml： Java代码： 我在StackOverflow上尝试了其他解决方案，但它们似乎都不起作用。我试过在两部手机上运行这个应用程序，都是Android版本 更新：我尝试在应用程序中添加导航抽屉。再次，当我点击抽屉按钮应该在的一侧时，菜单会显示出来，但按钮不可见。。。 更新2：
-
mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中，如下即为一个弹出菜单内容： <div id="popover" class="mui-popover"> <ul class="mui-table-view"> <li class="mui-table-view-cell"><a href="#">Item1</a></li
-
我正在创建一个网站，但我有一个问题，当我创建一个带有位置：固定的标题时，我创建的标题定位在内容下面，我创建的标题是堆叠的，我还使用溢出：隐藏，但内容仍然在标题上面 这是我的网站：https://zoomcoding.id/members/santriwibs/tes/
-
我有一个垂直飞行导航系统。第二级块通过在父级上将其不透明度从0设置为1来显示。这在IE和其他环境中工作得很好，但在FF中转换效果不起作用。 HTML标记： CSS中的部分： 演示
-
我使用onCreateOptionsMenu创建了一个溢出菜单，但该菜单几乎完全位于屏幕之外。我尝试过显式设置（如操作栏菜单显示屏幕中的建议），但这并没有解决我的问题。我也不想遵循使用旧主题的建议（如在ICS-Menu item text Cutoff？）。 XML是 我做错了什么？
-
我正在为应用程序添加一些材料设计风格，所以我为动作栏和状态栏选择了不同的颜色。 为此，该应用程序的主题是“主题。AppCompat。轻。暗操作栏”，并添加了这个以隐藏操作栏，因为我需要将其作为工具栏处理： 我使用过的主题： 我使用的布局： 代码： 出于某种原因，我有这样的行为： 动作项和溢出项的子菜单为黑色 单击搜索操作项时，溢出项为白色 我想自定义这些弹出菜单，使其一致。 我试过使用这个： 但这
-
弹出菜单是可触发的、上下文叠加显示链接列表和别的内容。它们可以与Bootstrap内置的弹出菜单JavaScript插件交互。它通过点击触发，而不是通过鼠标悬停悬浮。这是一个故意设计决策。 示例 把弹出菜单的触发器以及弹出菜单包裹在一个.dropdown中，或者其它声明了position:relative;的元素中。然后，添加菜单的HTML。 <div class="dropdown open">