Navigation JavaScript code (JS)

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Copy the beginNav code (JS) code (below)
    5. Paste that into your new file
    6. Click: Save
    7. Open your includes folder
    8. Name the file: navigation.js
    9. Change the Save as type:
      to: JavaScript file (*.js)
    10. In your index.html file, add this line before the </head> tag:
      <script src="includes/navigation.js"></script>
    11. In your index.html file, change the <body> tag to:
      <body onLoad="beginNav();">
    12. In your index.html file, add these lines before the <hr/> tag at the end of your page:
      <hr/>
      <div id="nav2"> <!-- setup div to contain the navigation code -->
      </div> <!-- end id="nav2" -->
    13. In your index.html file
    14. Add a link to this page. Change: <li>Modify Home Page to Use Javascript Navigation Page</li>
      to: <li><a href="index.html">Modify Home Page to Use Javascript Navigation Page</a></li>
    15. Save your changes
    16. Click: Run
    17. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    18. View your web page
    19. Make any changes
    20. Save your changes

beginNav code (JS)

function beginNav() {
  var navCode;
  /* create the HTML code */
  navCode = "<p>| <a href='index.html'>Home Page</a> | " +
  "<a href='index.html'>CSS Page</a> | " +
  "<a href='table.html'>Table Page</a> | " +
  "<a href='lists.html'>Lists Page</a> | " +
  "<a href='divs.html'>Divs Layout Page</a> | " +
  "<a href='form.html'>Form Page</a> | " +
  "<a href='multimedia.html'>Multimedia Page</a> | " +
  "<a href='js_prompt.html'>JS Prompt Page</a> | " +
  "<a href='javascript.html'>JavaScript Page</a> | " +
  "<a href='final.html'>Final Page</a> |</p>";
  /* display the HTML code */
  document.getElementById("nav").innerHTML = navCode; 
}

Example