JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<link rel="stylesheet" href="http://www.berriart.com/sidr/javascripts/vendor/sidr/stylesheets/jquery.sidr.dark.css">
<script src="http://www.berriart.com/sidr/javascripts/min.js"></script>
<a id="existing-content-menu" href="#existing-content-menu">Existing content</a> 
<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a> 
<a id="callback-menu" href="#callback-menu">Callback loaded</a>
 
<header id="demoheader">
    <h1>Demos &amp; Usage</h1>
</header>
 
<div id="demo-content">
    <p>Here are described differents ways of usage for this plugin, you can read and adapt them to your website's requeriments. Below are described all options with details.</p>
</div>

JavaScript

$(document).ready(function() {
    $('#existing-content-menu').sidr({
      name: 'sidr-existing-content',
      source: '#demoheader, #demo-content'
    });
    $('#remote-content-menu').sidr({
      name: 'sidr-remote-content',
      source: 'http://www.example.com/remote-menu.html'
    });
    $('#callback-menu').sidr({
      name: 'sidr-callback',
      source: function(name) {
        return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
      }
    });
});