My application needs a sliding panel for menus. Following code produces a panel that is almost hidden at the bottom of the page, it slides in on mouseover and slides back to bottom on mouseout.
<!DOCTYPE html>
<html>
<head>
<style>
/* Panel */
.panel-bottom {
position: fixed;
left: 0px;
bottom: -60px;
width: 100vw;
padding: 20px;
text-align: center;
background-color: rgba(200, 200, 200, 1);
font-size: 20px;
/* Transition */
transition: bottom 1s;
-webkit-transition: bottom 1s;
}
/* Slide in on mouseover */
.panel-bottom:hover {
bottom: 0px;
}
/* Hide on mouseout */
.panel-bottom:not(:hover) {
bottom: -60px;
}
.panel-bottom span,
.panel-top span {
margin: 20px;
}
</style>
</head>
<body>
<h1>Slider</h1>
<div class="panel-bottom">
<span><a href="#">Option-A</a></span>
<span><a href="#">Option-B</a></span>
</div>
</body>
</html>
CodePen: https://codepen.io/Samwise_71/pen/NWJZXXO
Now I want to change the panels behaviour as follows:
- The Panel should be visible by default.
- The visible panel should stay visible on mouseover
- The visible panel should slide to bottom on mouseout, only panels top edge stays at bottom of page.
- The hidden panel should slide in again on mouseover.
I can make the panel visible with
.panel-bottom { bottom: 0px; }
but then the mouseout rule will hide it immediately, if mouse is not over the panel.
I think to start with a visible panel the mouseout rule should only be applied after mouseover (when mouse is already over the panel).
Is there a CSS-only way to get a sliding panel that is visible by default and hides on mouseout?