Press "Enter" to skip to content

Material Design Bottom Sheet for Web Using Vanilla Javascript

Bottom-Sheet is a substitute for built-in menus or simple mobile dialogs and provides space for additional items. A vanilla JavaScript solution to create a touch-enabled, retractable footprint Android-inspired (Material Design).

How to make use of it:

1. Insert items to the sheet.

<div id="language-selector" class="c-bottom-sheet c-bottom-sheet--list">
  <div class="c-bottom-sheet__scrim"></div>
  <div class="c-bottom-sheet__sheet">
    <div class="c-bottom-sheet__handle">
      <span></span>
      <span></span>
    </div>
    <ul class="c-bottom-sheet__list">
      <li class="c-bottom-sheet__item active">
        <a class="c-bottom-sheet__link" href="#" class="d-flex justify-content-between">JavaScript</a>
      </li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">CSS/CSS3</a></li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">HTML5/XML</a></li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">Angular.js</a></li>
      <li class="c-bottom-sheet__item"><a class="c-bottom-sheet__link" href="">React.js</a></li>
    </ul>
  </div>
  <div class="c-bottom-sheet__container">
  </div>
</div>

2. Load the main script into the doc.

<script src="main.js"></script>

3. Run the demo utilizing the Parcel web application bundler.

// install parcel
npm install -g parcel-bundler

// build
parcel index.html

Material Design Inspired Bottom Sheets For Web, Bottom Sheet Plugin/Github

bottom-sheet-demo


See Demo And Download

Official Website(winndo): Click Here

This superior jQuery/javascript plugin is developed by winndo. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.