Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
slideout-css-only
<style type="text/css">
#slideout {
right: 0;
z-index:9001;
}
#slideout_inner {
right: -274px;
background-color:#f4f4f4;
width: 274px;
text-align:center;
}
#slideout, #slideout_inner{
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
position: fixed;
top: 102px;
height: 339px;
}
#slideout:hover {
right: 274px;
}
#slideout:hover #slideout_inner {
right: 0;
}
#slideout:focus {
right: 274px;
}
#slideout:focus #slideout_inner {
right: 0;
}
/* Optional */
@media (max-width: 991px){
#slideout, #slideout_inner {
top:unset;
bottom:0;
}
}
</style>
<div id="slideout" style="margin-bottom:0">
<img src="NeatImage.exe" alt="" />
<div id="slideout_inner">
<!-- Slide out content -->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment