JSFiddle - React, Tailwind, and code Playground

by keisersuze

HTML

<a id="button" href="#sidr">Open</a>
<nav id="sidr">
    <ul class="nav">
        
        <li><a href="javascript:void(0);">Menu 1</a></li>
        
        <li><a href="javascript:void(0);">Menu 2</a>            
            <ul class="sub-menu">            
                <li><a href="javascript:void(0);">Sub Menu 1</a></li>            
                <li><a href="javascript:void(0);">Sub Menu 2</a></li>            
                <li><a href="javascript:void(0);">Sub Menu 3</a></li>            
                <li><a href="javascript:void(0);">Sub Menu 4</a></li>            
                <li><a href="javascript:void(0);">Sub Menu 5</a></li>            
            </ul>         
        </li>
        
        <li><a href="javascript:void(0);">Menu 3</a></li>
        
        <li><a href="javascript:void(0);">Menu 4</a></li>
        
        <li><a href="javascript:void(0);">Menu 5</a></li>
        
        <li><a href="javascript:void(0);">Menu 6</a></li>
        
    </ul>
</nav>

CSS

html {
	font-size:100%;	
	position: fixed;
}
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size: .8em;
	color:#666;
    background:grey;
}
html, body {
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:auto;
	width:100%;
	height:100%;
}
:focus {
	outline:none;
	border:0;
}
ul {
	list-style:none;
	list-style-image:none;
	margin:0;
	padding:0;
}
.sidr ul li a {
	color:#999;
	display:block;
	transition:color .2s eas-ine-out;
}
@media screen and (min-width: 800px) {
	#button {
		display:none;
	}
	.sidr .nav-logo  {
		width:120px;
	}
	.sidr ul {
		position:relative;
		width:100%;
		text-align:center;
		z-index:99;
	}
	.sidr ul li {
		position:static;
		display:inline-block;
		text-align:center;
		*display:inline;
		*zoom:1;
	}
	.sidr ul li a {
		padding:30px 15px;
	}
	.sidr ul ul.sub-menu {
		position:absolute;
		width:100%;
		top:100%;
		left:0;
		z-index:999;
		background:black;
		z-index:1000;
		opacity:0;
		padding:15px 0;
		visibility:hidden;
		transition:opacity .1s ease-in-out, visibility .1s ease-in-out;
	}
	.sidr ul li:hover ul.sub-menu {
		opacity:1;
		visibility:visible;
	}
	.sidr ul li a:hover {
		color:#9C3;
	}
}
@media screen and (max-width: 800px) {
	#button {
		display:block;
		width:100%;
		padding:30px 0;
		background:black;
		z-index:999;
        color:#fff;
	}
	.sidr .nav-logo  {
		display:none;
	}
	.sidr {
		display: none;
		position:absolute;
		position: fixed;
		top: 0;
		height: 100%;
		z-index: 999;
		width: 260px;
		overflow-x: none;
		overflow-y: auto;
		background:black;
	}
	.sidr.right {
		left: auto;
		right: -260px;
	}
	.sidr.left {
		left: -260px;
		right: auto;
	}
	.sidr ul {
		display: block;
	}
	.sidr ul li {
		display: block;
	}
	.sidr ul li a {
		padding:10px 15px;
	}
	.sidr ul li a:active {
		color:#9C3;
	}
}
[class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after{
	display:inline-block;
}

JavaScript

// Plug-in Sidr.

;(function( $ ){

  var sidrMoving = false,
      sidrOpened = false;

  // Private methods
  var privateMethods = {
    // Check for valids urls
    // From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url
    isUrl: function (str) {
      var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
        '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
        '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
        '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
      if(!pattern.test(str)) {
        return false;
      } else {
        return true;
      }
    },
    // Loads the content into the menu bar
    loadContent: function($menu, content) {
      $menu.html(content);
    },
    // Add sidr prefixes
    addPrefix: function($element) {
      var elementId = $element.attr('id'),
          elementClass = $element.attr('class');

      if(typeof elementId === 'string' && '' !== elementId) {
        $element.attr('id', elementId.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-id-$1'));
      }
      if(typeof elementClass === 'string' && '' !== elementClass && 'sidr-inner' !== elementClass) {
        $element.attr('class', elementClass.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-class-$1'));
      }
      $element.removeAttr('style');
    },
    execute: function(action, name, callback) {
      // Check arguments
      if(typeof name === 'function') {
        callback = name;
        name = 'sidr';
      }
      else if(!name) {
        name = 'sidr';
      }

      // Declaring
      var $menu = $('#' + name),
          $body = $($menu.data('body')),
          $html = $('html'),
          menuWidth = $menu.outerWidth(true),
          speed = $menu.data('speed'),
          side = $menu.data('side'),
          bodyAnimation,
          menuAnimation,
          scrollTop;

      // Open Sidr
    ...