Stackable Top Navigation For Long Webpage - layer.js

File Size: 6.5 KB
Views Total: 1190
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stackable Top Navigation For Long Webpage - layer.js

layer.js is a lightweight jQuery plugin used to create sticky and stackable top menus for your long webpage that allows the user to switch between content sections. Suitable for one page websites and single page applications (SPA).

How to use it:

1. Add sectioned content to your webpage following the html structure like this:

<div id="layers">
  <div class="layer first">
    <div class="wrapper">
      First section
    </div>
  </div>
  <div class="layer second">
    <div class="wrapper">
      Second section
    </div>
  </div>
  <div class="layer third">
    <div class="wrapper">
      Third section
    </div>
  </div>
  ...
</div>

2. Place jQuery library and the JavaScript file layer.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/layer.js"></script>

3. Initialize the plugin by calling the function on the top container:

$('#layers').layer();

4. The required CSS styles:

#layers {
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 30px;
  margin: auto;
}

.layer-sticker {
  position: fixed;
  font-size: 12px;
  background-color: inherit;
  cursor: pointer;
  opacity: 1.0;
  left: 0;
  z-index: 100;
  color: lightgray;
  font-size: 17px;
}

.layer { position: relative; }

5. Set the height of the top navigation.

$('#layers').layer({
  beamheight: 40,
});

6. Customize the text displayed inside the top navigation.

$('#layers').layer({
  titles: ["First page","Second page","Third page"]
});

7. Config the scrolling animation when you switch between content sections.

$('#layers').layer({
  scroll: {
    speed: 500,
    offset: 0
  }
});

This awesome jQuery plugin is developed by joakimsoren. For more Advanced Usages, please check the demo page or visit the official website.