HTML & Gadgets‎ > ‎How-tos‎ > ‎

Navigation Menus

posted Feb 8, 2010, 9:15 AM by Morteza Mirmojarabian   [ updated Jan 6, 2014, 1:42 AM ]
The following tutorial shows you how to create a simple custom navigation bar, both horizontal and vertical.

Instructions
  • Button menus

    • Build your image buttons on GRSites or using any other button maker or image editor.
    • As per the instructions, upload them to a public folder in Drive and get their URLs.
    • Use Dynamic Content Writer to customize the following code and monitor changes in real time:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; float:left; margin-right:3px; outline:none;}
      a:hover img, a:focus img {visibility:hidden;}
      img {border:0;}
      #home {background-image:url(http://www.example.com/home-on.jpg);}
      #top-pics {background-image:url(http://www.example.com/top-pics-on.jpg);}
      </style>

      <nav>
      <a id="home" href="http://sites.google.com/site/mori79/home"><img src="http://www.example.com/home-off.jpg"></a>

      <a id="top-pics" href="http://sites.google.com/site/mori79/top-pics"><img src="http://www.example.com/top-pics-off.jpg"></a>
      </nav>
Result




    • To set it vertically, customize the following code and take similar steps:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:105px;  /* equal to the images width */
      margin-bottom:3px; outline:none;}
      a:hover img, a:focus img {visibility:hidden;}
      img {border:0;}
      #home {background-image:url(http://www.example.com/home-on.jpg);}
      #top-pics {background-image:url(http://www.example.com/top-pics-on.jpg);}
      </style>

      <nav>
      <a id="home" href="http://sites.google.com/site/mori79/home"><img src="http://www.example.com/home-off.jpg"></a>

      <a id="top-pics" href="http://sites.google.com/site/mori79/top-pics"><img src="http://www.example.com/top-pics-off.jpg"></a>
      </nav>

Result




  • Table menus

    • You can style your links in a tabular format. Here's a sample code to take similar steps:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      table {border-collapse:collapse;}
      table, td {padding:0; border:1px solid #330000;}
      a {display:block; font:bold 12px Verdana; color:#FFFFFF; background-color:#660000; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {background-color:#330000;}
      </style>

      <table>
      <tr>
      <td><a href="http://sites.google.com/site/mori79/home">Home</a></td>
      <td><a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a></td>
      </tr>
      </table>

Result




    • To set it vertically, take similar steps with the following code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      table {border-collapse:collapse;}
      table, td {padding:0; border:1px solid #330000;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#FFFFFF; background-color:#660000; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {background-color:#330000;}
      </style>

      <table>
      <tr><td><a href="http://sites.google.com/site/mori79/home">Home</a></td></tr>
      <tr><td><a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a></td></tr>
      </table>

Result





  • Tableless menus

    • Here's a sample code to take similar steps:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; float:left; width:74px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; text-align:center; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result




    • To set it vertically, take similar steps with the following code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result



    • Here's another sample code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; float:left; margin-right:2px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result




    • The vertical menu code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; margin-bottom:2px; font:bold 12px Verdana; color:#FFFFFF; background-color:#551F22; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {color:#320000; background-color:#DEB887;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result



    • Another sample code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      div {background-image:url(http://www.example.com/brown-gradient.png); overflow:hidden;}
      a {display:block; float:left; width:74px; border-right:1px solid #ffb894; font:bold 12px Verdana; color:#662900; text-align:center; padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {padding-top:9px; padding-bottom:7px;}
      </style>

      <nav>
      <div>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </div>
      </nav>

Result




    • The vertical menu code:
      <!DOCTYPE html>
      <base target="_parent">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#662900; background-image:url(http://www.example.com/brown-gradient.png); padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {padding-right:11px; padding-left:13px;}
      </style>

      <nav>
      <a href="http://sites.google.com/site/mori79/home">Home</a>

      <a href="http://sites.google.com/site/mori79/english-language/listening">Listening</a>
      </nav>

Result



* * * * * * *

Notes:
  1. You can pick any HTML color and its darker/lighter shades.
  2. You might also want to use a gradient image in the background.
  3. Click Edit pageLayout ► select the right one, e.g. One column or Left sidebar.
  4. Now you can create a page template including your desired menu and use it whenever you make a new page or even to change existing pages templates. That way you won't have to build a menu on each page and it will be gotten from your page template. To make changes in your menu such as renaming a page, adding/removing pages, etc, just change the gadget code.
DiscussPlease note that all posts are moderated.