JSFiddle - React, Tailwind, and code Playground

by dwaynie

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<div id="header">
  <div id="logo">
    <h1><img src="http://i.imgur.com/H9y7M.png" alt="MUZONE"></h1>
  </div>
  <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>
    <div id="top-menu">
      <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
      </ul>
    </div>
</div>
<img src="http://placehold.us/500x500">

CSS

body { padding: 30px; width: 700px; }
#logo { padding: 5px 0 16px; }
#top-menu { font-size: 11px; float: right; top: -132px; line-height: 17px; }
#main-menu, #top-menu { position: relative; }
#main-menu, #splash { margin-left: 1px; }
#main-menu { z-index: 99999; }
#main-menu > li, #top-menu { text-transform: uppercase; }
#main-menu > li { padding-right: 10px; }
#main-menu > li a { font-size: 20px; padding: 0 9px; }
#main-menu > li a:hover { text-decoration: underline; }
#main-menu ul { display: none; position: absolute; top: 40px; padding: 6px 0 8px; border: 1px solid #ccc; background: #fff;display: none; z-index: 1; }
#main-menu li { float: left; position: relative; }
#main-menu li ul { margin-top: 3px; }
#main-menu li ul li { float: none; }
#main-menu li ul li a { color: #000; background: #fff; line-height: 19px; font-size: 11px; text-transform: none; }
#main-menu li ul li a:hover { text-decoration: underline; }

JavaScript

// Main menu visibility
    //
    $("#main-menu").css({
      opacity: 0,
      marginTop: "-15px"
    }).show();

    $("#header").hoverIntent({
      over: function() {
        $("#main-menu").stop().animate({
          opacity: 1,
          marginTop: 0
        });
      },
      out: function() {
        $("#main-menu").stop().animate({
          opacity: 0,
          marginTop: "-15px"
        });
      },
      timeout: 100
    });

    // Main menu
    //
    function showMenu(element) {

      var label = element.children("a:first");
  
      // Get what a highlighted menu should show when hovered
      //
      var data = label.data("over");

      if (data !== undefined) {
        //
        // Actions to take if this menu is the highlighted one
        //
        // Set the label to be the original menu name
        //
        label.text(data);
      } else {
        //
        // Actions to take if this menu is not the highlighted one
      }

      // Switch from "off-hover" to "on-hover" classes
      //
      // element.removeClass("off-hover").addClass("on-hover");
      // label.removeClass("off-hover").addClass("on-hover");

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

      // Show the dropdown
      //
      $("ul", element).show();
    }

    function hideMenu(element) {

      var label = element.children("a:first");

      // Get what a highlighted menu should show when not hovered
      //
      var data = label.data("out");

      if (data !== undefined) {
        //
        // Actions to take if this menu is the highlighted one
        //
        // Set the label to be the name that was clicked
        //
        label.text(data);
      } else {
        //
        // Actions to take if this menu is not the highlighted one
        //
        // Switch from "on-hover" to "off-hover" classes
        //
        //...