About This Guide

This guide describes the ways that SiteGrinder buttons change in appearance and how they can make other page elements change in appearance.  This guide does not describe how you link buttons and menu items to other web pages, files, etc.  Hyperlinking is covered in its own Hyperlinking Essentials guide.

This document assumes you have read the SiteGrinder 3 Introduction and the Workflow Essentials guides. Please do so now if you haven't.

This guide has a video version and a text version found below the video.

All of the SiteGrinder 3 training videos are collected on the SiteGrinder TV page at Media Lab's website.

Introduction

A web page without interactivity is like, well, a page.  As in, you know, paper.  Remember paper?  Good times!  

Anyway, luckily for your soon to be amazed site visitors, SiteGrinder 3 provides a liberating range of features for creating hover and click effects that can have a huge visual impact on your pages.

Interactivity Basics

The most popular techniques for making pages respond visually to mouse movements and clicks include:

• Text and Image buttons that change appearance on hover and/or click
• Images or text that appear or disappear elsewhere on the page when a button is hovered over or clicked
• Popup/dropdown menus that are triggered when rolling over a button or menu item
• Animation options for most of the above including movement and fade in/out

Button/Menu Basics

Like most things in SiteGrinder, you create buttons and menus by adding hints to layers in Photoshop and setting various options later in the Design and Content Managers.  Image buttons and CSS text buttons are handled a little differently from each other.

Image Buttons (aka graphical buttons)

The simplest functional image button is just an image layer with the "-button" hint added to it.  This is enough to let SiteGrinder know that you want something to happen, usually going to some other page on your site, when that layer gets clicked.  Adding new button states for click and hover is just a matter of adding layers with the same name but with "-click" and "-hover" instead of "-button".  A layer named "contact-button", for example, can have a hover and a click state named "contact-hover" and "contact-click" for example.  (Click states are frequently avoided in modern web design.)

The alternate button versions completely replace the original button image when the mouse hovers or clicks. Because the user determines the visibility of these elements on the final page, only the "-button" layer has to be visible in the page's layer comp.

The "Image" in "Image Buttons" refers to the fact that these buttons end up as images on your website, but you create them by placing the "-button" and related hints on any kind of layer in Photoshop, including anti-aliased type layers and even layer groups.  In most cases Layer Groups with -button hints will merge to create one image when you build, which allows you to create visually complex but flexible buttons because you don't have to pre-merge the layers.  

As of SiteGrinder 3.5 you can even use a custom image button as the "submit" button for a SiteGrinder-created form.  See the Forms reference guide for details.

There are other powerful and labor-saving techniques involving layer group buttons which you can find in the Interactivity Reference.

Text Buttons

Text buttons appear as real CSS text on the final page, and so can only be created by adding the "-button" hint to type layers in Photoshop.  In addition, if the layer has an anti-aliasing setting other than "none" you will have to add the -text hint as well as the -button hint.

The main difference between text and image buttons is that text buttons don't have separate layers that indicate their click and hover states.  Instead you will determine how the button text changes in appearance in the Design Manager.  There are many options available, including background color, border, etc.

Text buttons aren't used very much because text menus (described in "Text Menus" below) are so much more useful.

Hybrid Buttons

SiteGrinder also allows you to have the best of both worlds by using layer groups to create "hybrid" buttons that mix image backgrounds with CSS text labels.  See the Mouse Interactivity Reference for details.

Text Menus

Text buttons don't usually like to be alone.  They prefer to congregate on web pages in little text button clubs known as "menus."

Because text menus are so common, SiteGrinder provides a "-menu" hint that can turn a single type layer in Photoshop into a flexible, search-engine friendly multi-item text menu on the built web page.  Text menus are one of the most important and powerful features of SiteGrinder.

Like text buttons, text menu item hover and click states (how the menu items change in appearance when they are hovered over or clicked on) are set in SiteGrinder's Design Manager, not using alternate layers.

There are two types of text menus, vertical and horizontal.

All "-menu"-hinted type layers that have more than one line become vertical menus, and each line in them becomes a menu item.

If a "-menu" layer has only one line then each item is separated from the next by multiple (more than one) spaces or spaces and the "|" vertical bar character.

Text menus have a number of super-powers including:

• You can add more menu items in the Content Manager after deploying your pages
• They are great for search engine optimization
• Just like buttons, menu items can have associated layers with -clickshow, -hovershow, hoverhide, etc. (see below)
• Items can have a "visited" style as well to indicate links to pages the site visitor has already seen

The main limitation of -menu layers is that they restrict you to rectilinear layout of the items.  You are always free to use individual -button layers (either CSS or image) for complete layout freedom.

Special Hover and Click Effects

Buttons and menu items can not only change themselves on hover and click, they can also change other parts of the page.

Basic Hover and Click

A button or menu item can cause a layer to appear or disappear on hover or click.  The hints for these actions are "-hovershow", "-clickshow","-hoverhide", and "-clickhide".

Thus a layer named "wow-button" will cause a layer anywhere on a page to become visible on hover if it is named "wow-hovershow".  Not surprisingly the same thing can be done on click with "wow-clickshow".  Likewise, "wow-hoverhide" and "wow-clickhide" layers will hide on hover or click of "wow-button".

Since clicks mostly take people away from your page immediately if they have a link, there is not much point in having a click state unless it doesn't link to anything and you have a -clickshow to reveal something.

Advanced Click Behavior

It's not just individual layers that can be controlled with the click and hover hints.  You can use these hints in conjunction with the layer groups or, for even more power, with the -column and -panel hints to show and hide multiple layers at a time, even complex column designs that appear to be windows with their own interactive forms and other controls.

SiteGrinder 3.5 introduces additional ways to control element visibility, including the "-clickstay" and "close-button" hints.

The -clickstay hint is designed to make it simple to create mix-and-match "paper doll" sorts of applications.  For example a website that sells tshirts for a band might have several tshirt colors and several band logo designs to choose from.  The -clickstay hint allows you to easily create a set of buttons to choose the different tshirt colors and a separate set of buttons to choose the logo designs.  Thus the site visitor can preview all the different combinations of colors and logos.

The close-button hint allows the site visitor to close one or more layers in a layer group that have been made visible via the clickshow or clickstay hints.  Thus a layer group named "contact us-clickstay" can have a close button if you name the button layer "close-button" and place it in the "contact us-clickstay" layer group in the layers palette.

Animation

Fade In/Out Animation

Showing and hiding of layers is all well and good, but wouldn't it be cool if they could hover and show with some sort of Web 2.0-style animation?  Yes, yes it would.

The simplest form of animation is to have hover and hide layers fade in or out.  This is controlled using the Animation panel in the Design Manager.  Every show or hide layer is listed there, and you can decide if they should fade in or out and even the timing of the fade.

Motion Animation

Almost as simple as fade in/out is to have a layer move from one spot on the page to another in response to a hover or click.  You tell SiteGrinder where a layer should start out in its animation by creating a layer with a matching name, positioning this layer where you want your motion to start, and giving it the "-movefrom" hint.  The destination is set by the position of the layer with the show/hide hint.

In this way a layer named "wow-hovershow" will animate to its position from the position of the contents of a layer named "wow-movefrom", triggered by a button named "wow-button".

Popup/Dropdown Menus

A very popular technique for navigating larger sites is to have a submenu appear when you hover over a menu item.  In SiteGrinder this is as simple as naming a "-menu" layer after the appropriate trigger menu item and adding the "-hovershow" hint.

As an example, if you have a text menu with an item named "Weddings", you can create a submenu for it in a type layer named  "weddings-menu-hovershow".

The "-menu-hovershow" layer will appear wherever you place it in your design when the trigger item is hovered over.  Popup menus can have animation just like any other -hovershow layer.

Layer Groups as Menus

You can create a submenu made of image buttons by placing the image buttons (and any decorative background elements) in a layer group and giving the layer group the appropriate name and "-hovershow" hint.  

IMPORTANT: You don't use the "-menu" hint in this case because such a group isn't a true SiteGrinder menu.  You cannot dynamically add buttons to this sort of menu in the Content Manager the way you can with text menus.

The -hide Hint

Sometimes you will want a layer to hide when any button with a "-hovershow" is hovered over, which is what the "-hide" hint accomplishes.  You don't need to match the name with any layer, because every button or menu item with a "-hovershow" on a page will cause a layer with the "-hide" hint to disappear on hover.

Hover and Click Elements in Columns

If you are using SiteGrinder's amazing -column feature to organize elements so they shift down to make room for others, you can include -hovershow and -clickshow layers in this readjustment.

If you have your -hovershow or -clickshow elements inside a column and you want them to be part of the column's dynamic element shifting then just make them visible in the page layer comp.  If they are hidden they will appear over and cover the contents of the column rather than moving things around to make room for them when they appear.

Where to Go From Here

At this point you may want to explore the techniques described here in more detail in the Interactivity Reference, or you can move on to the Content Management Essentials Guide.