JSFiddle - React, Tailwind, and code Playground

by dwaynie

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<p>Wanting to kill two birds with one stone by combining main menu and h1.</p>
<ol>
    <li>User clicks CATEGORY A and selects Test 1</li>
    <li>Test 1 appears instead of CATEGORY A in the main menu (with changed color and background-color)</li>
    <li>User hovers Test 1 and it temporarily returns to CATEGORY A</li>
    <li>Returns to CATEGORY A permanently if user leaves the page</li>
</ol>

<ul id="main-menu">
        <li>
          <a href="#">New</a>
        </li>
        <li>
          <a href="#">Category A</a>
          <ul>
            <li><a href="#">Test 1</a></li>
            <li><a href="#">Test 2</a></li>
            <li><a href="#">Test 3</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Category B</a>
          <ul>
            <li><a href="#">Test 1</a></li>
            <li><a href="#">Test 2</a></li>
            <li><a href="#">Test 3</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Category C</a>
          <ul>
            <li><a href="#">Test 1</a></li>
            <li><a href="#">Test 2</a></li>
            <li><a href="#">Test 3</a></li>
          </ul>
        </li>
      </ul>

<img src="http://thebuyosphere.files.wordpress.com/2010/03/dead-bird1.jpg">

CSS

body { padding: 30px; width: 700px; }
ol { padding: 10px 0 50px; }
ol li { list-style-type: decimal; margin-left: 20px; }

#main-menu { position: relative; z-index: 99999; }
#main-menu ul { display: none; position: absolute; overflow: hidden; white-space: nowrap; background: yellow; padding: 5px 0 8px; margin-top: 7px; }
#main-menu > li, #top-menu { font-size: 11px; text-transform: uppercase; }
#main-menu > li a { padding: 9px 17px; font-size: 20px; color: #fff; background: purple; }
#main-menu > li a:hover { color: #000; background: yellow; text-decoration: none; }
#main-menu li { float: left; position: relative; }
#main-menu li li { float: none; margin: 2px 0; }
#main-menu li li a { line-height: 22px; color: #000; background: yellow; font-size: 12px; padding: 3px 15px 4px; }
#main-menu li li a:hover { text-decoration: underline; }

JavaScript

$("#main-menu > li").hoverIntent({
    over: function() {

        // Set the colors straight
        //
        var onHover = {
            "background": "yellow",
            "color": "#000"
        }
        $(this).css(onHover);
        $(this).find("a:first").css(onHover);

        // Set the minimum width for the dropdowns
        //
        var width = $(this).width();
        $("ul", this).css("min-width", width);

        // Show the dropdown
        //
        $("ul", this).show();
    },
    out: function() {

        // Set the colors straight
        //
        var offHover = {
            "background": "purple",
            "color": "#fff"
        }
        $(this).css(offHover);
        $(this).find("a:first").css(offHover);

        // Hide the dropdown
        //
        $("ul", this).hide();
    },
    timeout: 300
});