SiteGrinder

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

While you can create a text menu by just creating and aligning individual text buttons, because text menus are so common SiteGrinder provides an amazing shortcut for creating them along with the pages they link to.

The faster and more convenient way to create a text menu in SiteGrinder is to use a single text layer. If a multi-line text layer has the "-menu" hint then SiteGrinder will assume each line of text corresponds to a hyperlink to a page SiteGrinder will be creating. In other words, a five line text layer with a "-menu" hint is similar to five individual text layers each with the "-button" hint.

Thus in the following example SiteGrinder will generate a text menu and the pages the menu items link to all from a single "-menu" text layer.

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

  1. Create a new type layer
  2. Type four or five likely page names, one on each line. (We'll use Home, Gallery, Contact, and Store)
  3. Now rename the layer, adding "-menu" to the end of the name. We used "mysite-menu". (The fastest way to rename a layer is to double click directly on the name in the layer palette.)
  4. Save the document
  5. Open SiteGrinder from Photoshop's File->Automate menu
  6. 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.

 example palette demonstrating menus

By looking at the address area of your browser as you click between the pages you can see that each page has a different name, and that the name is based on the name of the menu item that links to it. The pages themselves don't look like much because we haven't added any content to them other than the menu itself, but we're well on our way to creating a very functional site. And all with one click!

Notice that we never added any "-link" layers and yet the menu links are all functional! Since SiteGrinder created the pages it automatically knew how to link them so no explicitly defined "-link" layers were required.

When building a site SiteGrinder will create a new HTML page for every button you have defined whether in a menu or not. Often you will have a few buttons that link to pages that SiteGrinder isn't generating. Sometime you might want to link to pages on your site that already exist and other times you may want to link to outside web sites. Once you open SiteGrinder you can specify which buttons should create pages and which will just be links to already existing pages before you build. (See the discussion here.)

More Information on Text Menus:

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

You can create a perfectly sized colored background layer for the menu using SiteGrinder Tools.

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