How to make a hover menu without horizontal scroll? - html

Question

I'm just a beginner and I've got a problem with an easy task. I need to make a side menu that is half-hidden behind the screen. Something like that Example of hover menu. I want it to appear from the right when I hover it. Using my code below, a horizontal scroll appears. I can't give overflow:hidden to body because I need to scroll the page later. Give me some hints, please
Don't pay attention to styles, I need this task just for practice :)
<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">
About Us
Contacts
Location
Price
Cooperation
</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

You will need the side menu just when you are wishing to click. So using overflow:hidden; will help. You can keep vertical scroll while eliminating horizontal-scroll. Here's how I would do -
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">
About Us
Contacts
Location
Price
Cooperation
</div>
There's no scrollbar appearing. You probably would only need to scroll vertically. So you can just use overflow-X:hidden;. You code lacks responsiveness with screen-size, but with the above code , you can just hover on the menu to make it appear and you code would work fine for desktop screens.
I have made few changes to make the side-menu look appropriately located and the animations/transitions look smooth.
Hope this helps !