Horizontal Scrolling Menu In JavaScript - jQuery FadeNav

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.

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.

  • Publication date: 05.06.2019
  • Source