A Pen by philiphendry.

index.html

    <div class="slider">
        <div class="menu" id="slider-menu">

        </div>
    </div>

Slide-out-toolbox.markdown

Slide out toolbox

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.

License.

style.css

.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;
}