Horizontal And Vertical Content Toggle – blob-slide

Category: Animation , Javascript | November 9, 2019
Author: Blobfolio
Views Total: 1,228
Official Page: Go to website
Last Update: November 9, 2019
License: MIT

Preview:

Horizontal And Vertical Content Toggle – blob-slide

Description:

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

You Might Be Interested In:


Leave a Reply