Horizontal Navigation

posted Jul 28, 2010, 7:58 PM by Brian Johnson   [ updated Jun 14, 2011, 5:04 AM ]


The gadget spec URL could not be found
With Google Sites, you have the option to display your site's navigation using either the built-in navigation gadget as part of your sidebar, or as a horizontal menu across the top of each page.  (You can also use both navigation options at the same time, if necessary.)  This article outlines the steps required to enable/configure the horizontal menu.

Instructions

  1. Log into your site as Owner
  2. Select More Actions >> Manage Site.
  3. Select Site Layout from the left navigation menu.
  4. On the "Site Layout" screen, select the Change Site Layout button.
  5. Place a check in the box next to Horizontal Navigation Bar.
  6. Click OK to close the Change Site Layout overlay.
  7. Locate the Horizontal Navigation Bar section and click the Edit Content link:



  8. Add the desired pages/links to the navigation and position accordingly:



  9. Select the desired Style (appearance) from one of the following options:
    • Boxes (default):
    • Tabs:

    • Links:
  10. Click OK
  11. Click Save Changes and return to the site.  (You can also click Preview to see the changes without having to first save them for all to see.)

Drop-Down Menus

When adding items to the horizontal menu structure, it is possible to create sub-menu, or drop-down menu options.  To make use of this feature, perform the steps above exactly as written.  While adding pages/links at step 8, use the left and right arrows that appear to the right of the page names in the "Horizontal Navigation Properties" window.  Indenting a page name so that it appears as a child to another page will force that page to appear as a drop-down menu when saved and viewed on the site.  In the sample image above, the resulting menu would look like the following image:

Customization


The Horizontal Navigation Bar can be fully customized to match the look and feel of your site.  This is done through the Colors and Fonts menu option (More Actions >> Manage Site >> Colors and Fonts), and includes the following options: