Custom Image Navigation For One Page Scroll Website - Vertical Navigation

Custom Image Navigation For One Page Scroll Website - Vertical Navigation
File Size: 17.4 KB
Views Total: 4164
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Vertical Navigation is a jQuery plugin that generates a vertical side navigation from an arbitrary group of images for scrolling smoothly between page sections on your one page website. Also provides the scrollspy functionality that indicates on which section you're viewing.

How to use it:

1. Create a list of image links corresponding to the page sections within the document.

<div id="menu">
  <ul>
    <li>
      <a href="#section1" class="item_menu">
        <img src="img/1b.png" alt="1">
      </a>
    </li>
    <li>
      <a href="#section2" class="item_menu">
        <img src="img/2.png" alt="2">
      </a>
    </li>
    <li>
      <a href="#section3" class="item_menu">
        <img src="img/3.png" alt="3">
      </a>
    </li>
    <li>
      <a href="#section4" class="item_menu">
        <img src="img/4.png" alt="4">
      </a>
    </li>
  </ul>
</div>

2. Download and place the jQuery Vertical Navigation's script at the end of the document.

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

3. The CSS to style the image navigation and place it on the right hand side of the document.

#menu {
  position: fixed;
  right: 0;
  top: 45%;
  width: 8em;
  margin-top: -6.5em;
  z-index: 2;
  margin-right: 2rem;
}

#menu ul li {
  list-style: none;
  margin-bottom: 2px;
}

4. Initialize the plugin and specify the path to the navigation images.

$("#menu").vm_img({
  path_img: "img/"
});

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