Let's get started with a Web Site Hamburger Navigation Menu!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Click: Save
    5. Name that file: menu.html
    6. Click: Save
    7. Copy the Hamburger Menu Page Template (HTML) code (below)
    8. Paste that code into your menu.html file.
    9. In your index.html file:
      1. Add a link to this page.
        Change: <li>Create Menu Navigation Page</li>
        to: <li><a href="menu.html">Create Site Navigation Page</a></li>
    10. Save your changes
    11. Click: Run
    12. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    13. View your web page
    14. Make any changes
    15. Save your changes
<doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- put your name in this comment line -->
    <link href="includes/styles.css" rel="stylesheet"/>
    <style>
      #icon span {
        border-bottom: 2px solid black;
        display: block;
        height: 5px;
        width: 25px;
      }
      #menu {
        display: none;
      }
      #menu a {
        font-size: 24px;
        text-decoration: none;
      }
    </style>
    <script>
      function showHide() {
        var links = document.getElementById('menu');
        if (links.style.display === "block") {
          links.style.display='none';
        } else {
          links.style.display='block';
        }
      }
    </script>
  </head>
  <body>
    <h2>My Hamburger Menu Page</h2>
    <div id="icon" onclick="showHide();">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div id="menu">
      <a href="divs.html">Divs</a><br />
      <a href="grid.html">Grid</a><br />
      <a href="hamburger_menu.html">Menu</a>
    </div>
  </body>
</html>
HTML Hamburger Menu Navigation Template

Example