JSFiddle - React, Tailwind, and code Playground

by keaukraine

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>WebPage</title>
    <!-- begin CSS
    <link rel="stylesheet" type="text/css" href="static/public/css/pagestyle.css"/>
    <link rel="stylesheet" type="text/css" href="static/public/css/nav.css"/>
        begin Scripts
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript" src="static/public/js/pagescripts.js"></script>-->
</style>
</head>

<body>
    <div id="wrap">
    <div id="header">
        <ul id="nav">
            <li onmouseout="slideUp(this)" onmouseover="slideDown(this)"><a class="current" href="#">Nav 1</a>
                <ul>
                    <li onmouseout="fadeOutNav(this)" onmouseover="fadeInNav(this)"><a href="#">link one</a>
                        <ul>
                            <li><a href="#">sublink</a></li>
                            <li><a href="#">sublink</a></li>
                        </ul>
                    </li>
                    <li onmouseout="fadeOutNav(this)" onmouseover="fadeInNav(this)"><a href="#">link two</a>
                        <ul>
                            <li><a href="#">sublink</a></li>
                            <li onmouseout="fadeOutNavTwo(this)" onmouseover="fadeInNavTwo(this)"><a href="#">sublink</a>
                                <ul>
                                    <li><a href="#">subsublink</a></li>
                                    <li><a href="#">subsublink</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li onmouseover="currentHover(this)">
                        <a href="#">link three</a>
                    </li>
                </ul>
            </li>
            <li onmouseout="slideUp(this)" onmouseover="slideDown(this)"><a href="#">Nav 2</a>
                <ul>
                    <li>
                       ...

CSS

html, body {
    padding:0;
    margin:0;
    height:100%;
    background:#acf344;
}
#wrap {
    position:relative;
    min-height:100%;
    max-width:900px;
    min-width:514px;
    margin:0 auto;
    background:#00ccff;
    overflow:hidden;
}
#header {
    z-index:2;
    position:relative;
    height:150px;
    background: #000;
}
#content {
    z-index:1;
    position:relative;
    padding-bottom:30px;
    background:#ccc;
}
#footer {
    z-index:2;
    background:#333333;
    width:100%;
    text-align:center;

    position:absolute;
    height:30px;
    bottom:0px;
}
#nav {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    background: rgba(255, 0, 168, 1);
    margin: 0;
    padding: 7px 6px 0;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    background: #8b8b8b; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */
    border: solid 1px #6d6d6d;
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
}
/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
#nav li ul a {
    color: #666;
}
/* main level link hover */
#nav .current, #nav li:hover > a {
    background: #d1d1d1; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb',...

JavaScript

hoveringObject = null;
hoveringObjectTwo = null;
hoveringObjectThree = null;

$.fn.delay = function(time, type) {
    time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
    type = type || "fx";

    return this.queue(type, function() {
        var elem = this;
        setTimeout(function() {
            jQuery.dequeue(elem, type);
        }, time);
    });
};

function currentHover(hoverObject) {
    hoveringObject = hoverObject;
}

function currentHoverTwo(hoverObject) {
    hoveringObjectTwo = hoverObject;
}

function currentHoverThree(hoverObject) {
    hoveringObjectThree = hoverObject;
}

function slideDown(toSlide) {
    currentHover(toSlide);
    $($(toSlide).children('ul')[0]).slideDown('medium', function(){ $(this).css('overflow','visible') });
}

function slideUp(toSlide) {
    currentHover(null);
    window.setTimeout(function() {
        if (hoveringObject === undefined || toSlide !== hoveringObject) {
            $($(toSlide).children('ul')[0]).stop(true).delay(200).slideUp('fast');
        }
    }, 1);
}

function fadeInNav(toFade) {
    currentHoverTwo(toFade);
    $($(toFade).children('ul')[0]).fadeIn('medium');
}

function fadeOutNav(toFade) {
    currentHoverTwo(null);
    window.setTimeout(function() {
        if (hoveringObjectTwo === undefined || toFade !== hoveringObjectTwo) {
            $($(toFade).children('ul')[0]).stop(true).delay(100).fadeOut('fast');
        }
    }, 1);
}

function fadeInNavTwo(toFade) {
    currentHoverThree(toFade);
    $($(toFade).children('ul')[0]).fadeIn('medium');
}

function fadeOutNavTwo(toFade) {
    currentHoverThree(null);
    window.setTimeout(function() {
        if (hoveringObjectThree === undefined || toFade !== hoveringObjectThree) {
            $($(toFade).children('ul')[0]).stop(true).fadeOut('fast');
        }
    }, 1);
}