CSS Piano Menu

The Keyboard is made in CSS and HTML. It is all created in div elements, and styled under pianokey.css. It is made in such a way that the keyboard will stretch and scale horizontally without breaking to whatever container it's put in.

The #regularKeyboard is essentially a table and the white keys (using the class .key) fill it inside with equal width. Where a black key should go is a div with the class .innerkey. Within this div is the black key, allowing it to be positioned on top of the keyboard, not taking any space between two white keys, but still be placed and moved dynamically.

You can see the keyboard alone in action here: https://jsfiddle.net/gauderkd/vsuLraLx/

Note that this is just the keyboard, not the functionality. However, you can easily extend this keyboard for more keys as well as add hover and click effects using jQuery, as was done in the applet.

If adding more keys, you might need to tweak the width/placement of black keys

Here is the code that makes it work:

HTML:

<div id="regularKeyboard">
    <div class="key chromaC c0menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaDflat c1menu"></div>
    </div>
    <div class="key chromaD c2menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaEflat c3menu"></div>
    </div>
    <div class="key chromaE c4menu"></div>
    <div class="key chromaF c5menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaGflat c6menu"></div>
    </div>
    <div class="key chromaG c7menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaAflat c8menu"></div>
    </div>
    <div class="key chromaA c9menu"></div>
    <div class="innerKey">
        <div class="blackkey chromaBflat c10menu"></div>
    </div>
    <div class="key chromaB c11menu"></div>
</div>

CSS:

#regularKeyboard {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 96px;
}
#regularKeyboard div {
    display: table-cell;
    height: 96px;
}
.key {
    /*White key styling*/
    background: #fff;
    /*Default grayed-out look of the key*/
    border: 1px solid #3F3F3F;
    z-index: 4;
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
}
.innerKey {
    display: table-cell;
    height: 100px;
    width: 0px;
    z-index: 5;
}
.blackkey {
    position: absolute;
    /*Black key styling*/
    background: #000;
    width: 7%;
    height: 57px !important;
    /*Default grayed-out look of the key*/
    border: 1px solid #3F3F3F;
    border-top: 2px solid #000;
    z-index: 6;
    margin-left: -3.7%;
}

Note: It seems that the pianokey.css file has extra junk that isn't used anymore that is not included here. Also the background is slightly grayer in the actual file as if no data file is put within a menu item, that item stays grayed out