Horizontal And Vertical Content Toggle – blob-slide

The blob-slide library provides 2 methods to horizontally/vertically collapse and expand blocks of web contents with smooth transition effect.

How to use it:

Download and insert the blob-slide library into the html file.

<script src="blob-slide.js"></script>

Use blob-slide to create a vertically sliding nav menu.

<nav class="menu vmenu">
  <a href="#" id="vmenu-toggle" class="item item--top">vslide()</a>
  <a href="#" class="item item--toggle" hidden>One</a>
  <a href="#" class="item item--toggle" hidden>Two</a>
  <a href="#" class="item item--toggle" hidden>Three</a>
  <a href="#" class="item item--toggle" hidden>Four</a>
  <a href="#" class="item item--toggle" hidden>Five</a>
</nav>

document.getElementById('vmenu-toggle').addEventListener('click', function(e){
  e.preventDefault();
  blobSlide.vslide(
    document.querySelectorAll('.vmenu .item--toggle'),
    { duration: 500, transition: 'ease' }
  );
});

Use blob-slide to create a horizontally sliding nav menu.

<nav class="menu hmenu">
  <a href="#" id="hmenu-toggle" class="item item--top">hslide()</a>
  <a href="#" class="item item--toggle" hidden>One</a>
  <a href="#" class="item item--toggle" hidden>Two</a>
  <a href="#" class="item item--toggle" hidden>Three</a>
  <a href="#" class="item item--toggle" hidden>Four</a>
  <a href="#" class="item item--toggle" hidden>Five</a>
</nav>

document.getElementById('hmenu-toggle').addEventListener('click', function(e){
  e.preventDefault();
  blobSlide.hslide(
    document.querySelectorAll('.hmenu .item--toggle'),
    { duration: 500, transition: 'ease' }
  );
});

Possible options to customize the sliding effect.

{ 
  // display type
  display: "block"
  // in milliseconds
  duration: 100, 
  /*
    linear
    ease
    easeInQuad
    easeOutQuad
    easeInOutQuad
    easeInCubic
    easeOutCubic
    easeInOutCubic
    easeInQuart
    easeOutQuart
    easeInOutQuart
    easeInQuint
    easeOutQuint
    easeInOutQuint
  */
  transition: 'linear',
  // "show" or "hide"
  force: null
  
}

Changelog:

11/09/2019

• fix: whitespace

06/24/2018

• change to var

06/17/2018

• Update