1.1.4 • Published 7 years ago
boverlay v1.1.4
Boverlay - get started
Pull requests and ideas are much appreciated.
yarn add boverlay
Add boverlay to your project.
<script src="node_modules/boverlay/src/boverlay.min.js"></script>
<script>
var boverlay = new boverlay();
boverlay.init();
</script>
Add menus
data-name=""
refers to the id of div that also contains the class overlay
<a class="menu-item trigger-overlay" href="#" data-name="overlay-1">Overlay 1</a>
<div class="overlay overlay-hugeinc" id="overlay-1">
<a class="trigger-overlay overlay__close" data-name="overlay-1">
Close
</a>
<nav id="nav">
<h1 class="overlay__title">Heading</h1>
<ul class="row small-up-1">
<li class="column"><a href="#">1</a></li>
<li class="column"><a href="#">2</a></li>
<li class="column"><a href="#">3</a></li>
<li class="column"><a href="#">4</a></li>
<li class="column"><a href="#">5</a></li>
<li class="column"><a href="#">6</a></li>
</ul>
</nav>
</div>
Optional: Add the default stylesheet or copy it to your css.
<link rel="stylesheet" href="node_modules/boverlay/dist/boverlay.css">