Search this site
HTML & Gadgets‎ > ‎How-tos‎ > ‎

Navigation Menus

posted Feb 8, 2010 9:15 AM by Morteza Mirmojarabian   [ updated Apr 12, 2012 8:34 PM ]
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.
    • Upload them somewhere accessible on the Internet and get their direct URLs.
    • Use Dynamic Content Writer to customize the following code and monitor changes in real time:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <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://sites.google.com/site/mori79c/file-cabinet/home2.jpg);}
      #top-pics {background-image:url(http://sites.google.com/site/mori79c/file-cabinet/top-pics2.jpg);}
      </style>
      <base target="_parent">

      <a id="home" href="http://sites.google.com/site/mori79/home"><img src="http://sites.google.com/site/mori79c/file-cabinet/home1.jpg"></a>

      <a id="top-pics" href="http://sites.google.com/site/mori79/top-pics"><img src="http://sites.google.com/site/mori79c/file-cabinet/top-pics1.jpg"></a>
    • Go to Google Gadgets Editor (GGE) to create a gadget.
    • Replace Hello, world! on line 6 with your code.
      Note: A common mistake to avoid is replacing the whole GGE code with yours.
    • Click the File menu ► Save As ► enter a new file name, e.g. button-menu.xml ► click OK.
    • Right-click on the gadget file name, which is at the top-right corner of GGE, and copy its URL. For example:
      http://hosting.gmodules.com/ig/gadgets/file/102493921541441143368/button-menu.xml
    • Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Add gadget by URL ► Add
    • Width: 100%
    • Height: 35px   (equal to images height)
    • OK ► Save.
Result




    • To set it vertically, customize the following code and take similar steps:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:105px;  /* equal to images width */
      margin-bottom:3px; outline:none;}
      a:hover img, a:focus img {visibility:hidden;}
      img {border:0;}
      #home {background-image:url(http://sites.google.com/site/mori79c/file-cabinet/home2.jpg);}
      #top-pics {background-image:url(http://sites.google.com/site/mori79c/file-cabinet/top-pics2.jpg);}
      </style>
      <base target="_parent">

      <a id="home" href="http://sites.google.com/site/mori79/home"><img src="http://sites.google.com/site/mori79c/file-cabinet/home1.jpg"></a>

      <a id="top-pics" href="http://sites.google.com/site/mori79/top-pics"><img src="http://sites.google.com/site/mori79c/file-cabinet/top-pics1.jpg"></a>

Result




  • Table menus

    • You can style your links in a tabular format. Here's a sample code to take similar steps:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
      <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>
      <base target="_parent">

      <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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
      <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>
      <base target="_parent">

      <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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <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>
      <base target="_parent">

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

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




    • To set it vertically, take similar steps with the following code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <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>
      <base target="_parent">

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

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

Result



    • Here's another sample code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
      <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>
      <base target="_parent">

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

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

Result




    • The vertical menu code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
      <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>
      <base target="_parent">

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

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

Result



    • Another sample code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
      <style type="text/css">
      body {margin:0; padding:0;}
      div {background-image:url(http://lh5.googleusercontent.com/-yVwJudGSq5M/ToduF5oakBI/AAAAAAAAELo/nqe_DZ9PdRU/s800/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>
      <base target="_parent">
      <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>

Result




    • The vertical menu code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">      
      <style type="text/css">
      body {margin:0; padding:0;}
      a {display:block; width:120px; font:bold 12px Verdana; color:#662900; background-image:url(http://lh5.googleusercontent.com/-yVwJudGSq5M/ToduF5oakBI/AAAAAAAAELo/nqe_DZ9PdRU/s800/brown-gradient.png); padding:8px 12px; text-decoration:none; outline:none;}
      a:hover, a:focus {padding-right:11px; padding-left:13px;}
      </style>
      <base target="_parent">

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

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

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 page ► Layout ► select the right one, e.g. One column or Left sidebar.
  4. Now you can make a page template including your desired menu and use it whenever you create 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, add/remove pages, etc, just change the gadget code on Google Gadget Editor.
DiscussPlease note that all posts are moderated.