Last active
July 9, 2018 16:29
-
-
Save zgulde/9f2a42718f60a92652a7300533fcf215 to your computer and use it in GitHub Desktop.
Simple JS Navigation Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title></title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <!-- Basic bootstrap navbar | |
| Note that we're adding a 'data-page' attribute to all of the nav-links | |
| so our js can figure out where they are supposed to go | |
| --> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item active"> | |
| <a class="nav-link" data-page="home" href="#">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-page="profile" href="#">Profile</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-page="another" href="#">Another Page</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="container page home"> | |
| <h1>This is the home page!</h1> | |
| <!-- more content here --> | |
| </div> | |
| <div class="container page profile"> | |
| <h1>Here is the profile page!</h1> | |
| <!-- more content here --> | |
| </div> | |
| <div class="container page another"> | |
| <h1>Here is yet another page</h1> | |
| <!-- more content here --> | |
| </div> | |
| <!-- jquery --> | |
| <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> | |
| <!-- bootstrap js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
| <!-- custom js --> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Here are examples of both options, the index.html file works with the first | |
| * one, and the second would work with any html page. | |
| * | |
| * Honestly the problem you are trying to solve lends itself nicely to frontend | |
| * frameworks and client-side routing, but that seems like a lot of added | |
| * complexity for what you are trying to do. In addition, I'd say it's not | |
| * really a big deal to have separate page loads, but that being said, here's | |
| * the demo I have for you: | |
| */ | |
| /** | |
| * Option 1: Have all the html on a single page, then just show and hide bits of | |
| * it | |
| * | |
| * The downside of this approach is that you'd probably be passing a lot of data | |
| * to the view initially, and would only have a single controller method | |
| * server-side to work with it. In addition, you wouldn't have defined routes | |
| * for each of the pages, just the one big page where your JS handles the | |
| * navigation | |
| */ | |
| $(() => { | |
| // hide all the pages on page load, except for the home page | |
| $('.page').hide() | |
| $('.home').show() | |
| $('.nav-link').click(e => { | |
| /** | |
| * Whenever a nav-link is clicked, we'll hide all the pages, except for the | |
| * page that corresponds to the nav-link that was clicked, based on the | |
| * data-page attribute | |
| */ | |
| $('.page').hide() | |
| const page = e.target.dataset.page | |
| $(`.${page}`).show() | |
| $(`.${page}`).css('left', '100vw') | |
| $(`.${page}`).animate({left: '0'}, 2000) | |
| }) | |
| }) | |
| // /** | |
| // * Option 2: Make an ajax request and reset the page's html | |
| // * | |
| // * This is a little more complex, but will handle navigation without a page | |
| // * reload, and the other pages are still reachable through their normal urls | |
| // */ | |
| // $(() => { | |
| // // whenever a nav-link is clicked | |
| // $('.nav-link').click(e => { | |
| // // find the href of the clicked link | |
| // const href = e.target.href | |
| // // make an ajax request to the desired page to get the html response from it | |
| // $.get(href).then(htmlResponse => { | |
| // // The html response is the entire html content of the other page, so we | |
| // // need to parse it and just use the content from the body element. | |
| // // We'll create an html element in memory whose content is the html | |
| // // response we just got from the ajax request | |
| // const html = document.createElement('html') | |
| // html.innerHTML = htmlResponse | |
| // // now we can pull just the body element out of the html | |
| // const newBody = html.children[1] // the first element is the <head> | |
| // // now that we have our new body element (that contains the html response | |
| // // of the new page we want to navigate to), we can set the current page's | |
| // // html to the new html | |
| // document.body = newBody | |
| // }) | |
| // }) | |
| // }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment