What are some different ways to make a text menu? (Tutorial)

SiteGrinder is powerful, and so there are often multiple ways to achieve essentially the same goal. Here we will use three different techniques to make a text menu. This exercise will help you understand text buttons, links within text, and menus.

The goal will be to create a text menu of failed presidential candidates like this one:

Thomas Pinckney   Daniel Webster   Eugene Debs   Robert Dole

Here are the items and their links:

• Thomas Pinckney, www.schistory.org
• Daniel Webster, www.dartmouth.edu
• Eugene Debs, www.eugenevdebs.com
• Robert Dole, www.bobdole.org

There are three obvious ways to accomplish this with SiteGrinder:

• 4 text buttons using the "-button" hint
• A single type layer containing all four names and using the -haslinks hint
• A single type layer using the -menu hint

The "-menu" hint is the best way to go, but we'll work through all three so you can see the differences.

1. Creating the menu with individual text buttons

In an empty Photoshop document create four type layers each with the name of a candidate and position them in a horizontal line as shown to the left. Add the "-button" to the end of each of their names. Thus the layer containing the text "Robert Dole" should be named "Robert Dole-button" Now create four new type layers and type one of the links above into each one Now rename the layers you just made to appropriately match the name of the corresponding candidate layer, adding "-link" to the end. Thus layer containing "www.bobdole.org" should be named "Robert Dole-link" should be named Save the document and open SiteGrinder from Photoshop's File->Automate menu Click the "Build Preview" button. You're done!

Things to note:

• The button name doesn't have to match the contents, but does have to match the link layer's name. Notice in the example we used shorter versions of the candidate's names in the layer names
• The "-link" layers are just for storing link information. They aren't visible on the final page even if they are visible in the Photoshop document. Because of this their horizontal and vertical positions don't matter. It is generally convenient to draw them near to their buttons for convenience and keep them hidden most of the time so they aren't distracting.
• We could have used the Buttons pane of the SiteGrinder Window to set the links instead of using "-link" layers
• This is the least efficient way to make a text menu, but has the advantage of allowing you to position the buttons wherever you like, not just in a line. The buttons are independent of each other.
• When entering URLs in links layers you don't have to include "HTTP://" at the beginning. if you leave it out, SiteGrinder will fill it in for you when it builds the page.
• Normally SiteGrinder builds a page for every button, but since these buttons all link elsewhere it will only build one page

2. Creating the menu with one "-haslinks" type layer and one "links" type layer

In an empty Photoshop document create a new Paragraph type layer by dragging out a rectangle with the type tool. Make it big enough to contain all four candidate names on one line Enter the candidate's names into the field all on one line. Name the field "also rans-haslinks". This will be the menu. Now it needs a "-haslinks" layer so it can know what the links are. Make a new type layer and type each candidate's name on a line followed by the corresponding web address on the next line, followed by an empty line, followed by the next candidate until done. (See left) Name this layer "also rans-links" (Note, the hint here is "-links" with an "s" to distinguish it from the "-link" layers in the previous example! Save the document and open SiteGrinder from Photoshop's File->Automate menu Click the "Build Preview" button. You're done!

Things to note:

• "-links" layers are only used with "-haslinks" layers
• This technique is not generally ideal for menus, it is more for placing links on text within type layers. It will locate text to link within other text, so if you added "lost by a landslide" after "Thomas Pinckney" in the "-haslinks" layer the links will still all work when SiteGrinder builds the site, but "lost by a landslide" will correctly have no link. Try it!

3. Creating the menu with one "-menus" type layer

In an empty Photoshop document create a new Paragraph type layer by dragging out a rectangle with the type tool. Make it big enough to contain all four candidate names on one line. Enter the candidate's names into the field all on one line, separating each full name from the next with two spaces Name the field "also rans-menu". Set the paragraph alignment of the layer to "Centered" Save the document and open SiteGrinder from Photoshop's File->Automate menu

6. Save the document and open SiteGrinder from Photoshop's File->Automate menu
7. Click on the "Buttons" tab near the top of the window
8. For each candidate in the list of buttons, click in the link column to the left of the candidate's name, select "URL" from the "Type of Link" area, and enter the URL for the candidate. (see above)
9. Click the "Build Preview" button. You're done!

Things to note:

• Menu items are a lot like buttons. They show up in the "buttons" list, for example, allowing you to set links for them
• The main difference between menu items and buttons are that the name of the menu item button is the same as the item itself, whereas for buttons such as those in the first example the name of the text button is the name of the layer.
• We could have used the "-link" layer technique from the first example to put in the links instead of the SiteGrinder UI. For example a layer named "Robert Dole-link" will match the "Robert Dole" menu item.
• Notice on the resulting pages how the rollover hilite (the default is italic) stays active for the item corresponding to the page you are viewing. This is a text menu feature called "hilite stays" and can be turned off in the "Text Buttons" pane.
• The buttons in the first example would also obey the "hilite stays" setting if we had placed them all in a layer set and added the "-menu" hint to the end of the layer set's name. Try it!

 

Media Lab Home > SiteGrinder Home > Subject Index | Complete Index