JSFiddle - React, Tailwind, and code Playground

by Kishore Polsani

HTML

<div id="header">
    <div id="main-header" class="center">
        <div id="menu">
            <ul>
                <li><a href="#">Menu Item 1</a></li>
                <li><a href="#" id="button" onclick="showhide()">Menu Item 2</a></li>
                <li><a href="#">Menu Item 3</a></li>
                <li><a href="#">Menu Item 4</a></li>
                <li><a href="#">Menu Item 5</a></li>
                <li><a href="#">Menu Item 6</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="sub-menu"><a class="close" href="#">Sub Menu Panel (click to close)</a></div>
<div id="container"></div>
<div id="footer"></div>

CSS

body { font-family: Arial, Helvetica, sans-serif; position: absolute; width: 100%; height: auto; margin: 0px; padding: 0px; }
a { text-decoration: none; }
.center { margin-right: auto; margin-left: auto; }
#header { background-color: #333333; position: relative; width: 100%; height: auto; top: 0px; }
#main-header { position: relative; width: 1200px; height: 115px; }
#menu { position: absolute; width: 100%; top: 85px; }
#menu ul { margin: 0px; padding: 0px; }
#menu ul li { float: left; list-style: none; }
#menu ul li a { font-size: 16px; color: #FFFFFF; display: block; clear: both; margin-right: 40px; }
#menu ul li a:hover { color: #99FF00; }
#sub-menu { font-size: 24px; background-color: #eee; position: relative; width: 100%; height: 200px; text-align: center; padding-top: 30px; }
#container { background-color: #ff00ff; position: relative; z-index: -999; width: 100%; height: 600px; }
#footer { background-color: #333333; position: relative; width: 100%; height: 200px; }

JavaScript

function showhide()
     {
           var div = document.getElementById("sub-menu");
    if (div.style.display != "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
 }

showhide();

$(document).ready(function(){
    $('#menu li:nth-child(2)').click(function(){
        $('#sub-menu').slideToggle(300);
    });
    $('a.close').click(function(){
        $('#sub-menu').slideUp(300);
    });
});