Prev & Next page BTNs traveling through the menu

Prev & Next page BTNs traveling through the menu

I'd like to add 2 buttons down on my pages that go to the previous and next pages and, if possible, take their links straight out of the navigation already present (and relative to the page I'm on). I've only gotten so far with this for days and I could sure use some handouts :p

The menu is the Foundation off-canvas one and it poses problems for me because of all the nesting and stuff.

I would prefer if I could get the actual links straight out of the ul.off-canvas-list, but I can't find how to skip over the unuseful '#' links and <labels>.

This is what I think worked in part for the Next BTN, but it doesn't know how to skip the unuseful <li>'s so gets stuck at the end of a submenu. And I just notice it only seems to search for the current page in any of the .left-submenus as well. There are pages without submenus too.

  1. $("#next-page-BTN").on("click", function(e) {
  2.       e.preventDefault();      // prevent # being added to page in url
  3.       var page = location.pathname.substring(1);
  4.       if (!page) {page = index.php}  // in case of domain name only
  5.       // locate current <li> position in submenu
  6.       var currentLink = $('.left-submenu a[href$="'+ page + '"]').parent('li');
  7.       var nextLink = $(currentLink).next().find('a').attr('href');
  8.       window.location = nxtLink;
  9. });

I guess another method may be to clone the ul.off-canvas-list and then use .remove() for some of the unuseful links? But again the nesting is killing me there...
Doing it this way may at least give a clean list that is easy to prev / next in.
If you choose to help me with the first tactic, I may need the handouts for the Prev *and* Next code, as possibly they may differ more than replacing 'next()' with 'prev()'...?

Anyway... Thank You in advance for any hints... :)

This is how it could look and the variation it has:
  1. <div class="show-for-medium-down">
  2. // top bar code
  3. <nav class="tab-bar">
  4.     <section class="left-small">
  5.         <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
  6.     </section>
  7.     <section class="middle tab-bar-section">
  8.         <h1 class="title">SITE</h1>
  9.     </section>
  10. </nav>
  11. //  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - 
  12.  <aside class="left-off-canvas-menu">

  14.   <ul class="off-canvas-list">

  16.     <li><label>HOME</label></li>
  17.     <li class="has-submenu"><a href="#">GENERAL</a>
  18.         <ul class="left-submenu">
  19.             <li class="back"><a href="#">BACK</a></li>
  20.             <li><a href="index.php">Intro</a></li>
  21.             <li><a href="location.php">Location</a></li>
  22.             <li><a href="gallery.php">Gallery</a></li>
  23.          </ul>
  24.     </li>

  26.     <li><label>MUSIC</label></li>
  27.     <li class="has-submenu"><a href="#">LISTEN</a>
  28.         <ul class="left-submenu">
  29.             <li class="back"><a href="#">ROCK</a></li>
  30.             <li><a href="hendrix.php">Hendrix</a></li>
  31.             <li><a href="clapton.php">Clapton</a></li>
  32.             <li><a href="stones.php">Stones</a></li>
  33.         </ul>
  34.     </li>

  36.     <li><label>COURSES</label></li>
  37.     <li class="has-submenu"><a href="#">WEBDEV</a>
  38.         <ul class="left-submenu">
  39.             <li class="back"><a href="#">BACK</a></li>
  40.             <li><a href="learn.php">Learn PHP</a></li>
  41.         </ul>
  42.     </li>

  44.     <li><a href="contact.php">Contact</a></li>

  46.   </ul>

  48.  </aside>
  49. </div>