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

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.