JSFiddle - React, Tailwind, and code Playground

by GGaritaJ

HTML

<script src="https://www.ggaritaj.com/"></script>
<script src="https://github.com/GGaritaJ/ggContentMenu"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="ggContentMenu" />
    <meta name="author" content="Ing.Gerardo Garita Juarez" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-Xss-Protection" content="'1; mode=block' always">
    <meta http-equiv="X-Content-Type-Options" content="'nosniff' always">
    <title>jQuery Plugin ggContentMenu</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  </head>

  <body>

    <nav>
      <ul id="myMenu" class="ggContentMenu">
        <li>
          <a href="#" tabindex="1">
                    <span class="glyphicon glyphicon-menu-hamburger"></span>
                </a>
          <div class="contentMenu first">
            <ul>

              <li menu-level="1">
                <a tabindex="2">
                                <span>LISTA POR DEFECTO</span>
                            </a>
                <div class="contentMenu">
                  <ul>
                    <li menu-level="2">
                      <a href="#">Lista 1</a>
                    </li>
                    <li menu-level="2">
                      <a href="#">Lista 2</a>
                    </li>
                    <li menu-level="2">
                    ...

CSS

/*////////////////////////////////////////////
// ggContentMenu Cell JS/CSS PlugIn V1.0    //
// Developed by: Ing.Gerardo Garita J.      //
// FullStack Developer                      //
// email: [email protected]                 //
// date: friday, 2018-09-01                 //
// last date: friday, 2018-09-01            //
////////////////////////////////////////////*/

ul.ggContentMenu:first-child,
.ggContentMenu ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.ggContentMenu ul li {
  padding: 10px 5px;
  text-align: left;
}

.ggContentMenu ol {
  padding: 0px;
  margin: 0px 0px 0px 30px;
  list-style-type: decimal;
}

.ggContentMenu ol.alpha {
  list-style-type: lower-alpha !important;
}

.ggContentMenu ol.roman {
  list-style-type: upper-roman !important;
}

.ggContentMenu ol.vignette {
  list-style-type: circle !important;
}

.ggContentMenu li[menu-level="1"] {
  text-align: center;
}

.ggContentMenu li[menu-level="2"] {}

.ggContentMenu li[menu-level="3"] {
  text-align: center;
}

.ggContentMenu ul li a {
  margin: 10px 5px;
  outline: none;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.ggContentMenu ul li a:hover {
  cursor: pointer;
  color: #ff0000;
}

.ggContentMenu ul li a:focus {
  color: #ff0000;
  text-decoration: underline !important
}

.ggContentMenu a:before {
  content: "+";
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-right: 10px;
}

.ggContentMenu a.active:before {
  content: "-";
}

.ggContentMenu a[href]:before {
  content: none !important;
}

.ggContentMenu a.active+div.contentMenu {
  -webkit-animation: fadeInLeft 0.7s ease-in-out both;
  animation: fadeInLeft 0.7s ease-in-out both;
  display: block !important;
  max-width: 260px;
}

.ggContentMenu a+div.contentMenu {
  display: none !important;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 5px;
}

.ggContentMenu div.contentMenu.first {
 ...

JavaScript

///////////////////////////////////////////////
// ggContentMenu Cell JS/CSS PlugIn V1.0     //
//  Developed by: Ing.Gerardo Garita J.      //
//                FullStack Developer        //
//  email:  [email protected]                //
//  date:       friday, 2018-09-01           //
//  last date:  friday, 2018-09-01           //
///////////////////////////////////////////////

;
(function($) {
  var _opts;
  jQuery.fn.ContentMenu = function() {
    return this;
  };
  jQuery.fn.ggContentMenu = function(options) {
    try {
      var _menu = this;
      var _height = $(window).height();
      $(_menu).find("a").each(function(p, atag) {
        $(atag).on("click", function(e) {
          if ($(this).hasClass("active")) {
            $(this).removeClass("active");
          } else {
            $(this).addClass("active");
          }
        });
      });
      $('html').unbind("click").on('click', function(event) {
        if ($(_menu).find($(event.target)).length <= 0) {
          $(".ggContentMenu div.contentMenu.first").animate({
            width: "0px"
          }, 700);
          setTimeout(function() {
            $(".ggContentMenu a.active").removeClass("active");
            $(".ggContentMenu div.contentMenu.first").css("width", "260px");
          }, 700);
        } else {
          $(".ggContentMenu div.contentMenu.first").css("width", "260px");
        }
      });
      _opts = options;
      console.log("gg:content menu ready!");
    } catch (err) {
      console.log("Error: " + err + ".");
    } finally {
      setTimeout(function() {
        window.dispatchEvent(new Event('resize'));
      }, 1000);
    }
  };
  jQuery.fn.ContentMenu().Refresh = function(options) {
    try {
      var _height = $(window).height();
      var _menuContainer = $(this).find("div.contentMenu.first");
      _opts = ((options == undefined || options === null || options === "") ? _opts : options);
      if ((_opts != undefined) && (_opts !== null) && (_opts !== "")) {
 ...