JSFiddle - React, Tailwind, and code Playground

by notanothercliche

HTML

<div id="menu-show">
    <a href="#" class="down"></a>
</div>

<div id="menu">
    <div class="menu-main">
        Menu Contents
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          <div class="clear"></div>
        </ul>
        More HTML content
    </div>
    <div class="menu-bottom"></div>
</div>

CSS

.down {
    background: url("http://www.twinkletwinklelittleone.com/source/new-design/imgs/category.png") left top transparent;
    height: 17px;
    position: absolute;
    width: 177px;
}
.up {
    background-position: left bottom;
}

#menu {
    display: none;
    position: absolute;
    top: 34px;
    width: 634px;
    z-index: 100000;
}

.menu-main {
    background: url("http://www.twinkletwinklelittleone.com/source/new-design/imgs/menu-bg.png") repeat scroll 0 0 transparent;
    padding: 5px 15px;
    width: 624px;
}
.menu-main ul {
    margin:10px 20px;
}
.menu-main ul li {
    float:left;
    width:150px;
}
.menu-bottom {
    background: url("http://www.twinkletwinklelittleone.com/source/new-design/imgs/menu-bottom.png") repeat scroll 0 0 transparent;
    height: 13px;
    width: 634px;
}
.clear {
    clear:both;
}

JavaScript

jQuery(document).ready(function() {
    // shows the menu on clicking the noted link
    jQuery('#menu-show').click(function() {
        // toggles the indicator arrow
        jQuery('a.down').toggleClass('up')
        jQuery('#menu').slideToggle();
    });
});