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" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="fadenav.js"></script>

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

<div class="fadenavwrapper">
  <select class="navoptions" hidden>
    <option>jQuery</option>
    <option>Script</option>
    <option>Net</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>HTML</option>
    <option>Python</option>
  </select>
  <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>
</div>

3. Get the value you just selected.

function processFadeNav(value) {
  console.log(value);
}

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

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

    // Include PHP script (fadenav.php)
    include 'fadenav.php';
  ?>
</div>

---

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