I needed a sliding out toolbox anchored to the right of the page and that slides out toward the middle.
A Pen by philiphendry on CodePen.
<div class="slider"> | |
<div class="menu" id="slider-menu"> | |
</div> | |
</div> |
I needed a sliding out toolbox anchored to the right of the page and that slides out toward the middle.
A Pen by philiphendry on CodePen.
.slider { | |
background-color: blue; | |
border: solid 1pt black; | |
position: absolute; | |
right: 0; | |
top: 50px; | |
bottom: 50px; | |
width: 25px; | |
} | |
#slider-menu { | |
position: relative; | |
left: 0px; | |
height: 100%; | |
width: 300px; | |
transition: 1s; | |
/* Transition time back to this position */ | |
background-color: green; | |
border-top: 4pt solid red; | |
border-left: 4pt solid red; | |
border-bottom: 4pt solid red; | |
border-radius: 25px; | |
} | |
#slider-menu:hover { | |
transition: 1s; | |
/* Transition time to open */ | |
left: -250px; | |
} |