html - 如何制作没有水平滚动的悬停菜单？

Question

我只是一个初学者，我有一个简单的任务有问题。我需要制作一个半隐藏在屏幕后面的侧边菜单。类似的东西 Example of hover menu .当我悬停它时，我希望它从右侧出现。使用我下面的代码，会出现一个水平滚动条。我不能给 overflow:hidden to body 因为我需要稍后滚动页面。请给我一些提示
不要关注样式，我需要这个任务只是为了练习:)

<div class="wrapper">
    <div class="main-content">
        <h1> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, aliquam!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro assumenda sint totam fugiat earum fugit? Obcaecati
            blanditiis nobis voluptatum enim labore nihil amet inventore ad? Est perspiciatis nam amet dicta laudantium
            vel dolor rerum minima quas non excepturi, repellat sequi!</p>
    </div>
</div>
<div class="hover-menu">
    <a href="#">About Us</a>
    <a href="#">Contacts</a>
    <a href="#">Location</a>
    <a href="#">Price</a>
    <a href="#">Cooperation</a>
</div>

body{
    background: url('/images/broken-lights.jpg') no-repeat 0 0/cover;
    text-align: center;
    width: 100%;
    position: relative;
}
.wrapper{
    padding-top: 100px;
    width: 1200px;
    min-height: 400px;
    margin: 0 auto;
    background: linear-gradient(black 0px, rgba(0,0,0, 0) 90%);
    border-radius: 40px;
    box-shadow: 0 0 10px;
}
.hover-menu{
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translate(0,-50%);
    right: -40px;
} 
.hover-menu a{
    display: block;
    background: turquoise;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 40px; 
}

Answer 1

当您希望单击时，您将需要侧边菜单。所以使用 overflow:hidden;会有所帮助。您可以在消除水平滚动的同时保持垂直滚动。这是我会怎么做 -

body{
    background: url('/images/broken-lights.jpg') no-repeat 0 0/cover;
    text-align: center;
    width: 100%;
    position: relative;
   overflow-X: hidden;
}
.wrapper{
    padding-top: 100px;
    width: 1200px;
    min-height: 400px;
    margin: 0 auto;
    background: linear-gradient(black 0px, rgba(0,0,0, 0) 90%);
    border-radius: 40px;
    box-shadow: 0 0 10px;
    overflow-X:hidden;
}
.hover-menu{
    position: absolute;
    display: block;
    top: 25%;
    right: -40px;
} 
.hover-menu a{
    display: block;
    background: turquoise;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 40px; 
}

.hover-menu:hover{
  transform:translateX(-40px);
  transition-duration:1s;
}

.hover-menu a:hover{
  transform:translateX(-40px);
  transition-duration:1s;
}
.hover-menu a{
  transition-duration:0.5s;
}
.hover-menu{
  transition-duration:0.5s;
} 

<div class="wrapper">
    <div class="main-content">
        <h1> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, aliquam!</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro assumenda sint totam fugiat earum fugit? Obcaecati
            blanditiis nobis voluptatum enim labore nihil amet inventore ad? Est perspiciatis nam amet dicta laudantium
            vel dolor rerum minima quas non excepturi, repellat sequi!</p>
    </div>
</div>
<div class="hover-menu">
    <a href="#">About Us</a>
    <a href="#">Contacts</a>
    <a href="#">Location</a>
    <a href="#">Price</a>
    <a href="#">Cooperation</a>
</div>

没有出现滚动条。您可能只需要垂直滚动。所以你可以使用 overflow-X:hidden; .您的代码缺乏对屏幕大小的响应能力，但是使用上面的代码，您可以将鼠标悬停在菜单上以使其出现，并且您的代码可以在桌面屏幕上正常工作。
我做了一些改动，使侧边菜单看起来位置合适，动画/过渡看起来很流畅。
希望这可以帮助 !