Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body class="flex-center-wrapper flex-column"> 
<div id="nav-icon2">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <h1>
    Sliiide
  </h1>
  <h2>
    The Easiest Way to Create a Sliding Nav Menu
  </h2>
  <div class="buttons-container flex-center-wrapper flex-row">
    <div>
      <button id="left-toggle" class="slider-toggle selected" data-link="left-menu"></button>
      <span>Left</span>
    </div>
    <div>
      <button id="top-toggle" class="slider-toggle" data-link="top-menu"></button>
      <span>Top</span>
    </div>
    <div>
      <button id="right-toggle" class="slider-toggle" data-link="right-menu"></button>
      <span>Right</span>
    </div>
    <div>
      <button id="bottom-toggle" class="slider-toggle" data-link="bottom-menu"></button>
      <span>Bottom</span>
    </div>
  </div>
  <div class="note flex-center-wrapper flex-row left-note display" data-link="left-menu">
    <div>
      <svg class="arrow left-arrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="415.154px" height="415.154px" viewBox="0 0 415.154 415.154" style="enable-background:new 0 0 415.154 415.154;"
      xml:space="preserve">
      <g>
        <g>
          <path d="M383.605,65.133c-0.345-7.32,1.488-20.244,1.442-32.659C384.997,15.777,381.534,0,364.782,0
          c-0.482,0-0.939,0.109-1.407,0.145c-1.898-0.12-3.879-0.046-6.032,0.505C238.909,30.986,131.387,95.339,36.026,170.424
          c-5.36,4.223-6.889,9.372-6.025,14.211c-0.371,2.575-0.599,5.149-0.604,7.759c-0.005,5.86,2.928,11.1,7.343,14.444
          c0.577,0.787,1.143,1.572,1.887,2.323c85.564,86.296,185.217,163.39,300.518,204.876c3.747,1.346,7.089,1.382,10.019,0.604
          c6.87-0.111,13.66-0.635,20.469-1.904c8.577-1.595,13.787-10.785,13.244-19.058c0.01-0.37,0.106-0.7,0.106-1.092
          C382.981,283.402,388.791,174.289,383.605,65.133z M346.658,378.112c-105.606-38.517-197.16-109.954-276.208-188.665
          C152.918,125.7,245.515,71.123,345.866,41.579C353.208,153.66,347.338,265.914,346.658,378.112z"/>
        </g>
      </g>
    </svg>
  </div>
  <div>
    <p>
      Create a slick Navigation Menu and sliiide will handle closing the menu on any link click
    </p>
  </div>
</div>
<div class="note flex-center-wrapper flex-row right-note display-off" data-link="right-menu">
<div>
  <p>
    Put all your social media and contact info in a sliding menu instead of cluttering your page
  </p>
</div>
<div>
  <svg class="arrow right-arrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="415.154px" height="415.154px" viewBox="0 0 415.154 415.154" style="enable-background:new 0 0 415.154 415.154;"
  xml:space="preserve">
  <g>
    <g>
      <path d="M383.605,65.133c-0.345-7.32,1.488-20.244,1.442-32.659C384.997,15.777,381.534,0,364.782,0
      c-0.482,0-0.939,0.109-1.407,0.145c-1.898-0.12-3.879-0.046-6.032,0.505C238.909,30.986,131.387,95.339,36.026,170.424
      c-5.36,4.223-6.889,9.372-6.025,14.211c-0.371,2.575-0.599,5.149-0.604,7.759c-0.005,5.86,2.928,11.1,7.343,14.444
      c0.577,0.787,1.143,1.572,1.887,2.323c85.564,86.296,185.217,163.39,300.518,204.876c3.747,1.346,7.089,1.382,10.019,0.604
      c6.87-0.111,13.66-0.635,20.469-1.904c8.577-1.595,13.787-10.785,13.244-19.058c0.01-0.37,0.106-0.7,0.106-1.092
      C382.981,283.402,388.791,174.289,383.605,65.133z M346.658,378.112c-105.606-38.517-197.16-109.954-276.208-188.665
      C152.918,125.7,245.515,71.123,345.866,41.579C353.208,153.66,347.338,265.914,346.658,378.112z"/>
    </g>
  </g>
</svg>
</div>
</div>
<div class="note flex-center-wrapper flex-column top-note display-off" data-link="top-menu">
  <div>
    <svg class="arrow top-arrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="415.154px" height="415.154px" viewBox="0 0 415.154 415.154" style="enable-background:new 0 0 415.154 415.154;"
    xml:space="preserve">
    <g>
      <g>
        <path d="M383.605,65.133c-0.345-7.32,1.488-20.244,1.442-32.659C384.997,15.777,381.534,0,364.782,0
        c-0.482,0-0.939,0.109-1.407,0.145c-1.898-0.12-3.879-0.046-6.032,0.505C238.909,30.986,131.387,95.339,36.026,170.424
        c-5.36,4.223-6.889,9.372-6.025,14.211c-0.371,2.575-0.599,5.149-0.604,7.759c-0.005,5.86,2.928,11.1,7.343,14.444
        c0.577,0.787,1.143,1.572,1.887,2.323c85.564,86.296,185.217,163.39,300.518,204.876c3.747,1.346,7.089,1.382,10.019,0.604
        c6.87-0.111,13.66-0.635,20.469-1.904c8.577-1.595,13.787-10.785,13.244-19.058c0.01-0.37,0.106-0.7,0.106-1.092
        C382.981,283.402,388.791,174.289,383.605,65.133z M346.658,378.112c-105.606-38.517-197.16-109.954-276.208-188.665
        C152.918,125.7,245.515,71.123,345.866,41.579C353.208,153.66,347.338,265.914,346.658,378.112z"/>
      </g>
    </g>
  </svg>
</div>
<div>
  <p>
    Or a full screen takeover for an important call to action, sliiide takes care of stretching the width to screen size
  </p>
</div>
</div>
<div class="note flex-center-wrapper flex-column bottom-note display-off" data-link="bottom-menu">
  <div>
    <p>
      Think this plugin is useful? how about showing it some love :)
    </p>
  </div>
  <div>
    <svg class="arrow bottom-arrow" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="415.154px" height="415.154px" viewBox="0 0 415.154 415.154" style="enable-background:new 0 0 415.154 415.154;"
    xml:space="preserve">
    <g>
      <g>
        <path d="M383.605,65.133c-0.345-7.32,1.488-20.244,1.442-32.659C384.997,15.777,381.534,0,364.782,0
        c-0.482,0-0.939,0.109-1.407,0.145c-1.898-0.12-3.879-0.046-6.032,0.505C238.909,30.986,131.387,95.339,36.026,170.424
        c-5.36,4.223-6.889,9.372-6.025,14.211c-0.371,2.575-0.599,5.149-0.604,7.759c-0.005,5.86,2.928,11.1,7.343,14.444
        c0.577,0.787,1.143,1.572,1.887,2.323c85.564,86.296,185.217,163.39,300.518,204.876c3.747,1.346,7.089,1.382,10.019,0.604
        c6.87-0.111,13.66-0.635,20.469-1.904c8.577-1.595,13.787-10.785,13.244-19.058c0.01-0.37,0.106-0.7,0.106-1.092
        C382.981,283.402,388.791,174.289,383.605,65.133z M346.658,378.112c-105.606-38.517-197.16-109.954-276.208-188.665
        C152.918,125.7,245.515,71.123,345.866,41.579C353.208,153.66,347.338,265.914,346.658,378.112z"/>
      </g>
    </g>
  </svg>
</div>
</div>
<div class="sliding-menu flex-center-wrapper flex-column left-menu">
  <ul>
    <li>
      <a href="http://www.aradwan.me" target="_blank">ABOUT ME</a>
    </li>
    <li style="list-style: none; display: inline">
      <hr>
    </li>
    <li>
      <a href="https://github.com/ahmedrad/sliiide" target="_blank">VIEW ON GITHUB</a>
    </li>
    <li style="list-style: none; display: inline">
      <hr>
    </li>
    <li>
      <a href="https://github.com/ahmedrad/sliiide" target="_blank">HOW TO USE</a>
    </li>
  </ul><span class="sliiider-exit exit left-exit">&#215</span>
</div>
<div class="sliding-menu flex-center-wrapper flex-column right-menu">
  <span class="sliiider-exit exit right-exit">&#215</span>
  <ul>
    <li><a href="https://twitter.com/aradwan_88" target="_blank"><img class="social" src="img/twitter-white.png"></a></li>
    <li><a href="http://instagram.com/aradwan" target="_blank"><img class="social" src="img/insta-white.png"></a></li>
    <li><a href="https://www.linkedin.com/in/radwanahmed" target="_blank"><img class="social" src="img/linkedin-white.png"></a></li>
  </ul>
</div>
<div class="sliding-menu flex-center-wrapper flex-column top-menu">
  <span class="sliiider-exit exit top-exit">&#215</span>
  <h2>
    Did you know about our awesome upcoming event? Click here to get all the details!
  </h2><button class="cta">Show Me More</button>
</div>
<div class="sliding-menu bottom-menu flex-center-wrapper flex-row">
  <span class="sliiider-exit exit bottom-exit">&#215</span>
    <iframe src="https://ghbtns.com/github-btn.html?user=ahmedrad&repo=sliiide&type=star&count=true&size=large&v=2" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://ahmedrad.github.io/sliiide" data-text="Just showing some love to this jQuery plugin!" data-via="aradwan_88" data-size="large" data-hashtags="jquery">Tweet</a>
</div>
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                $(document).ready(function() {
var $navIcon = $('#nav-icon2')
var menu = $('.left-menu').sliiide({place: 'left', exit_selector: '.left-exit', toggle: '#nav-icon2'});
var notes = $('.note');
var toggles = $('.slider-toggle')
var clickHandler = function() {
  var $button = $(this);
  if ($button.hasClass('selected')) {return;}
  $navIcon.removeClass('flip animated');
  notes.fadeOut(700);
  var place = $button.attr('data-link').split('-')[0];
  var menuPlace = $button.attr('data-link');
  var note;
  menu.reset();
  $button.addClass('selected');
  $('.slider-toggle').not($button).removeClass('selected');
  menu = $('.'+menuPlace).sliiide({place: place, exit_selector: '.'+place+'-exit', toggle: '#nav-icon2'});
  $navIcon.addClass('flip');
  $('.note[data-link="'+menuPlace+'"]').fadeIn(700).css('display','').removeClass('display-off');
}
toggles.on('click', clickHandler)
} );

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
              
            
!
999px

Console