SiteGrinder

How do I make a text popup menu?


Popup menus are accomplished simply by naming a "-menu" set after the button that should trigger the popup menu. If there is a button named "Personnel-button" and a set named "personnel-menu", then that menu will appear when "Personnel-button" is rolled over. The buttons inside the "personnel-menu" set can even have their own rollovers and even their own menus.

This is easiest to demonstrate with some multi-line text menus.

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

  1. Create a "paragraph text" text rectangle
    To create a text rectangle you drag with the type tool.
  2. Put in a couple of lines of text like "Products" "Personnel"
    This will be our main menu, the one that triggers the popups. Make sure the text box is wide enough so that each item fits in its own line.
  3. Name the layer something like "Main-menu"
  4. The layer is shown with it's bounding box. Notice we have left a little room on the right side to accommodate increased space that will be taken up by the text if it uses the default italic rollover hilite style. This is a good idea because if you cut it too close turning italic may cause the text to wrap.
main menu
  1. Create another text rectangle for products and put some lines of text in it.
    (we used the Media Lab product line)
  2. Name that layer "products-menu"
step 2
  1. Create another text rectangle for personnel and put some lines of text in it.
  2. Name that layer "personnel-menu" (You guessed it, didn't you?)
  3. Now position the products and personnel layers with the move tool so they are flush against the right side of the main-menu layer
  4. Open SiteGrinder and click the "Build" button. You're done!
  5. That's it! Sitegrinder has now created a page with a text popup menu along with pages for each menu item and the navigation programming to jump between them.
final popup menu

At this point you may wish to open SiteGrinder again and play with some of the text button settings to get some fancier rollover results like changing the background color of the menu items, etc. Here's a slightly nicer version with some custom settings.

Notice how the rollover hilite sticks around for the page that you are currently visiting. This behavior is the default and can be turned off.

One of the most powerful features of this easy menu system is that menus can mix and match of all of the SiteGrinder elements we have seen so far. In other words you could have a graphical button pop up a text menu and some of those text menus could in turn pop up graphical menus, etc. You can even have a single menu with some text and some graphic elements. The mind boggles.

The menu adding process can go on for as long as you can think of new menus and items to fill them with. If you wanted to add submenus to one of the products, let's say "SiteGrinder", you would just create another multi-line text menu with relevant items (let's say "Tech Support", "Download", etc.), name it "sitegrinder-menu" and position it where you want it to popup, probably just to the right of the "products" layer's text box. Give it a try.