Google Sites: Create a flyout menu.

As schools across nation are gearing up for the new year, teachers may be interested or have already created their own classroom web site.  The tutorial below demonstrates how to create flyout menus using Google Sites.

To jazz up your site a little bit and make navigating it a little bit easier, many web designers us a horizonatal fly-out menu option.  Fly-out menus give options as you hover your mouse over a specific location on your website like the following picture demonstrates.  I hovered my mouse over the "Student Resources" tab and then a menue appeared with links to other website links, links within my site, or even email addresses.

Tutorial

1.  Once you are logged into your Google Site, click the "More" button and choose the "Manage Site" option toward the bottom of the menu.

2.  Toward the left hand side you will see a set of options.  Look for the "General" section and then click the "Site Layout" option.

3.  Click the "Change site layout" button.

4.  There are many options to play with here, and this is a great place to go to add or take away options from your site.  For the purpose of this tutorial though just make sure the "Horizontal navigation bar" check box is checked.  Click the "OK" button.

5.  Now clic the "edite horizontal nav content" link found under the "horizontal navigation bar" section.

6.  Change the style to "Tabs."  You can sure play with the other to options "Boxes," and "Links" to see how that changes the appearance of your Navigation Menu on your web site.

7.  Now find the "Select pages to display" section.  If you are just starting then you wont see a whole bunch here, just the "Add page" and "Add URL" links.  Lets start with the "Add page" link.

8.  If you have pages built in Google Sites, they should display here.  You can even use the search bar to find a specific page.  Once you know which page you would like to appear on your Horizontal Menu click on it and then click the OK button.

9.  Now lets add a website link to your menu bar.  Click the "Add URL" link.

10.  Type in specific text that you would like to display in your menu.  Then type in either a website address or an email address in the second box.  Click OK.

11.  Once you have added all of your pages and URLs you need to organize them.  To the right of the box you will see 4 arrows and a boxed "x".  Use the up and down arrows to arrange the links in order.  Use the right or left arrows to create sub categories.  These sub categories are the fly-out menus and the categories are the menu tabs that you will initially see on your site.

12.  Example:  The "Governing board" tab that you see is my first category.  If you were to hover your mouse over the tab you would then see the sub categories, District Policies and SUSD5 File Cabinet.

Well that is really all there is to making a Horizontal fly out menu using Google Sites.