---

---

How do I make a horizontal text menu from a single layer?

---

The previous example demonstrated the creation of a vertical text menu using a multi-line text layer. This example demonstrates a similar technique that allows you to create a multi-item horizontal text menu using a single-line text field. As with other text layers you wish to keep as text on the final web page you should use paragraph text rather than point text.

In vertical text menus SiteGrinder creates a menu item from each line. In horizontal text menus SiteGrinder checks for items are separated from one another using either two or more spaces or else the common technique of using the vertical bar character (found on the keyboard over the backslash character). Thus a one-line type layer with the "-menu" hint that contains either "Item 1   Item 2   Item 3" or "Item 1 | Item 2 | Item 3" will produce a three item horizontal menu.

These Guidelines will avoid problems with horizontal text menus:

• Always center align the "-menu" type layer
• Use extra spaces to separate menu items
• Make sure Photoshop's "Space Before" setting is set to zero for the layer

As with vertical menus SiteGrinder will generate a page for each item and automatically add links to the right page for each item.

Here is how it's done starting with a new empty document in Photoshop:

Create a new Paragraph type layer by dragging out a rectangle with the type tool. Enter four or five likely page names on one line, separating each item from the next using two spaces. (Each menu item can have multiple words as long as they are separated by only one space) Now rename the layer "sample-menu" Set the alignment for the layer to Centered Save the document and open SiteGrinder from Photoshop's File->Automate menu Click the "Build Preview" button. You're done! That's it! Sitegrinder has now created the correct number of HTML web pages each with a menu for jumping to the others. Click on the items in the built page to see.

As with a vertical text menu a new page is generated for each item. Menu items are much like buttons and appear in the list of buttons in SiteGrinder's "Buttons" and Text Buttons" panes. They will automatically match pages that match their name. If you want a menu item to match to something else you can add a -link layer matching the menu item's name (i.e."Home-link" for the "Home" item in the above example) or you can reassign links in SiteGrinder's Button's pane.

You can control how the items change appearance on rollover in the SiteGrinder window's "Text Buttons" pane.

Click here to find out how SiteGrinder can also make vertical text menus from a single type layer.