JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<div class="overlayTrigger hover">
    <a href="#overlay" class="button"> me</a>
    <div id="overlay" class="overlay">
        <h1 class="overlayTitle">Overlay</h1>
        <ul class="view">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
            <li><a href="#">Item 9</a></li>
        </ul>
    </div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: #333;
    margin: 100px;
}

.overlayTrigger {
    height: 38px;
    width: 84px;
    position: relative;
}

.overlayTrigger .button {
    background-color: rgb(18, 18, 18);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(100, 100, 100)), color-stop(50%, rgb(51, 51, 51)), color-stop(50%, rgb(18, 18, 18)), to(rgb(0, 0, 0)));
    background-image: -webkit-linear-gradient(top, rgb(100, 100, 100), rgb(51, 51, 51) 50%, rgb(18, 18, 18) 50%, rgb(0, 0, 0));
    background-image: -moz-linear-gradient(top, rgb(100, 100, 100), rgb(51, 51, 51) 50%, rgb(18, 18, 18) 50%, rgb(0, 0, 0));
    background-image: -o-linear-gradient(top, rgb(100, 100, 100), rgb(51, 51, 51) 50%, rgb(18, 18, 18) 50%, rgb(0, 0, 0));
    background-image: -ms-linear-gradient(top, rgb(100, 100, 100), rgb(51, 51, 51) 50%, rgb(18, 18, 18) 50%, rgb(0, 0, 0));
    background-image: linear-gradient(top, rgb(100, 100, 100), rgb(51, 51, 51) 50%, rgb(18, 18, 18) 50%, rgb(0, 0, 0));
    padding: 7px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 -1px 0 #000;
    border: 1px solid rgb(2, 2, 2);
    border-bottom: 1px solid rgb(57, 57, 57);
    cursor: pointer;
    display: block;
    text-align: center;
    line-height: 24px;
    text-decoration: none;
}

/* The overlay works with hovering and with clicks. To make it work only on hovering, just remove .hover from .overlayTrigger. Additionally, the button's text changes according to the interaction method. */

/* Hover */

.overlayTrigger.hover .button:before {
    content: "Hover";
}

.overlayTrigger.hover:hover .overlay {
    left: 50%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.overlayTrigger.hover:hover .overlay.left {
    left: 0;
    -ms-filter:...

JavaScript

/*
    This is a simple iPad-style overlay, created using only CSS3. It works in all major browsers, even down to IE 7.

    You can play around with some things here:
    - Remove .hover from .overlayTrigger to make it work by clicking the button.
    - Add .right or .left to .overlay to change the alignement of the overlay.
    - Add or remove items to the overlay list. Actually, you could put everything you want to in there, but I wanted to keep that iPad-look so I decided to go with text-only rows.

    If you find any bugs - hopefully not - or have any suggestions for improvements, please comment on my post on Forrst: ...

    Created by Sacha Schmid on 11/22/11
*/