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).
Must Read: Angular Library To Enable Animated Bottom Sheet Component
How to make use of it:
1. Insert items into 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 document.
<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
See Demo And Download
Official Website(winndo): Click Here
This superior jQuery/javascript plugin is developed by winndo. For extra Advanced Usage, please go to the official website.
