Horizontal Scrolling Menu In JavaScript - jQuery FadeNav

File Size: 5.56 KB
Views Total: 4197
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Horizontal Scrolling Menu In JavaScript - jQuery FadeNav

FadeNav is a jQuery plugin which converts the regular dropdown select into an accessible horizontal scrolling menu on the webpage.

You can navigate between menu items with left/right arrows. Pressing the ESC key will reset and scroll the menu to the first item.

How to use it:

1. To get started, place jQuery library and the FadeNav plugin's files into the HTML document.

<link rel="stylesheet" href="fadenav.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
<script src="fadenav.js"></script>

2. Create a hidden select element for the horizontal scrolling menu.

<div class="fadenavwrapper">
  <select class="navoptions" hidden>
  <p id="cat-before-two" class="smallest">HTML</p>
  <p id="cat-before-one" class="smaller">Python</p>
  <p id="cat-active">jQuery</p>
  <p id="cat-after-one" class="smaller">Script</p>
  <p id="cat-after-two" class="smallest">Net</p>

3. Get the value you just selected.

function processFadeNav(value) {

5. You can also use the horizontal scrolling menu with PHP

<div style="width: 100%; height: 100%;">
    // Create an array of the navigation values.
    $fadenav = array("one", "two");

    // Include PHP script (fadenav.php)
    include 'fadenav.php';

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