Skip to content
An infinite horizontal scrolling fading navigation controlled by the arrow keys using HTML, PHP, JS, JQuery and CSS.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CNAME
README.md
demo.html
example.php
fadenav.css
fadenav.js
fadenav.php

README.md

FadeNav

An infinite horizontal scrolling fading navigation using HTML, PHP, JS, JQuery and CSS. The navigation is controlled by the arrow keys.

A demo (without PHP) is available here.

How it works:

Inside the header:

<!-- 1. Include CSS stylesheet (fadenav.css) -->
<link rel="stylesheet" href="fadenav.css">

Inside the body:

<?php
  // 2. Create array of navigation values.
  $fadenav = array("one", "two");

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

Inside the footer:

<!-- 4. Include JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 5. Include Javascript script (fadenav.js) -->
<script type="text/javascript" src="fadenav.js"></script>
<!-- 6. (Optional) Process the navigation change -->
<script>
  var randomized = 0;
  function processFadeNav(value) {
    var num = Math.floor((Math.random() * 100000) + 1);
    randomized = num;

    $.ajax({
      type: "POST",
      url: "/path/to/get.php",
      data: { 
        data : value
      },
      success: function(data) {
        if (num == randomized) {
          $("#id").html(data);
        }
      },
      error: function(data) {}
    });
  }
</script>

The processFadeNav(value) function is ran whenever the navigation changes, where value is the active navigation value. The randomized number makes sure only the last selected value is processed after fast switching.

Or see this file for a complete example.

You can’t perform that action at this time.