Page 36
7.5 The Navigation Tab
The Navigation tab contains a variety of editing options that let you keep it simple or
allow you to get a little fancier. There are two main elements encompassed in your
navigation: the Navigation Menu, and the Menu Items contained within the menu. The
menu items are the pages in your website and display the names that you assigned in
your navigation list while in the Content window.
───────────────────────────────────────
Navigation Properties
The interface for the Navigation tab is divided into two main subsections: Properties
and Borders. The Properties section contains the editing options for the orientation,
position and size of the main navigation menu, the navigation format for both the main
menu and submenu, as well as the editing options for the menu font color, size,
alignment and menu item animation (including image wells for graphic buttons). The
Borders section is divided into two subsections: border options for the menu items and
border options for the main navigation menu.
Under Navigation Properties, you can change and edit the following attributes:
Orientation, Position & Size of the Navigation Menu
Orientation of the Navigation Menu
The first option under Properties is a pop up list that lets you choose between Vertical,
Horizontal, or Horz Fixed (Horizontal Fixed Width) orientation for your navigation
menu. Click the pop up button and select the desired option from the list. Vertical will
make your menu go down the page from top to bottom; Horizontal will make your
menu go across the page from left to right; Horz Fixed will keep the menu items set to
a fixed width within a horizontal-oriented menu.
Position & Size of the Navigation Menu
You can either use your mouse to grab the navigation menu in the viewer window or
use the spin box controls to move the navigation menu to a new position on the page
and resize the width of navigation menu box. The height of the navigation menu is
dependent on the other settings you specify for spacing (which follow here).
Additionally, you cannot grab the individual menu items for sizing and positioning as
their attributes are relative to the encompassing menu box and are set by other
properties covered in the sections that follow below.
Horizontal Fixed Width
If you choose to set your menu to Horz Fixed, you will notice an additional editing
option is available under the Position and Size settings - Item Width. Use the spin box
control to increase or decrease the width of the menu items in the navigation box. The
navigation menu will automatically adjust to the correct width for each item as well as
for the main navigation box, as shown in the pictures below.
Editing the Menu Font Attributes
The next section in the Properties interface contains the
options for editing the font used in the menu items. Click the
pop up buttons to select the font type and font sizes for your
main menu and submenu (if applicable). Both the Main Menu
and Submenu font type will be the same, but the font size
can be adjusted independently for each one. Below the font
size controls, you can click the corresponding icon to italicize
or bold the font, or to left, center, or right align the navigation
text within the menu. Font colors are a separate option and
are edited next when creating the menu animation.
Menu Item Animation: Create the Rollovers and Other Traits for Your Navigation
The third section on the interface, called Menu Item Animation, contains the options for
adding different behaviors to your menu items when someone rolls over or clicks on an
item. Think of these traits as the different "states" a menu item can take on at a given
moment in time, or the visual queues your visitors can use to determine where they
are in your website. There are four behaviors or states, which you can easily create
and edit:
Current: Current is the current state of the item when someone is currently viewing the
contents of that particular page. Giving the current item a different look will make it
stand out from the other menu items and show the viewer what page he/she is
currently viewing in your site.
Normal: Normal is the regular state of the menu items when no action is being
performed on them, or rather, while they are idle. The traits you specify for the normal
state will be reflected on the items when they are not touched or left alone.
Hover: Hover, also known as a rollover, is the state the item will be in when someone
rolls their mouse over the item or hovers above the item before clicking it. Hover traits
are used to make the item pop out from the Normal state, showing the item contains a
link, as well as creating an interesting visual effect.
Click: Click is the state an item changes to when someone clicks on it with the mouse.
The click color is sometimes set to be the same as the hover color, or sometimes the
same as the current color, or completely different from the other three states - it's
totally up to you what color you make it, but be sure to keep it within the general color
scheme of your web site.
Creating & Editing the Menu Item Animation States:
All four menu item states - Current, Normal, Hover and Click - offer the same editing
options independent of one another: Font Color, Underline Font option, Background
Color or Background Image. The background color is the color that will show up behind
the menu item text. Likewise, if you choose to use an image to create a graphical
button for the different states of your menu, the graphic will appear behind the text. To
create and edit the menu animation, follow these steps for each state:
1. Go to the Current option and click the color well to select the font color for the
'current' state of the menu item. You will see the color change in the viewer window.
To change the color, click the color well and select the new color.
2. To underline the font in the current menu item, click the Underline icon (U). To
remove the underline, simply click the Underline icon (U) again to turn it off.
3. To give the current menu item a background color, click the Color radio button.
Then click the color well to select the desired background color from the color
palette. To apply the color to your menu item, click the checkbox.To remove the
color, click the check box again. To change the color, click the color well and select
the new color.
4. To create and edit the settings for the other three menu item states, move down the
list and repeat Steps 1-3 for the corresponding state - Normal, Hover, and Click.
Adding Graphical Buttons to the Navigation Menu
You can drop images into the menu item backgrounds to serve as graphical buttons
for your navigation. These buttons can change with each state or stay the same - the
choice is yours. You can keep it simple by using the same button for each state and
only changing the font color, or get fancy by creating an enlarged image for the hover
state, or any number of different creative ideas you think of. If you're interested in
doing something more than what is described here in the user manual, ShutterBug
Land Tips (when ready), will offer a few different ideas to get creative with graphical
buttons.
You can use .JPG, .GIF, and .PNG files for the image backgrounds. To use images
with transparent backgrounds, use either .GIF or .PNG file formats (.TIFF with
transparent background is not supported). To use an image in your menu and edit the
animation states, follow the steps below:
1. Click the Image radio button to reveal the background image wells.
2. There are four rectangular image wells, one for each menu item state. Drag and
drop the desired image into the first image well to give the Current state a graphical
button or background. You will see the image appear in the menu item for the page
you are currently working on, in the viewer window.
3. Go to the second image well in the list and drag and drop the same image or a
different image into the well to give the Normal state a graphical button or
background. You will see the image appear in the rest of the menu items in your
navigation menu.
4. Drag and drop the desired image(s) into the third and fourth image wells to give the
Hover and Click states a graphical button or background. You can view the
behavior and appearance of these images by hovering and clicking on your menu
items from within the Preview window.
5. To keep the images from appearing in your menu, click the Image radio button to
deactivate the background images for all four menu item states. To change the
background image, simply drag and drop the new image into the appropriate image
well. You cannot delete an image from the well.
Notes:
• Images with transparent backgrounds will show the background color selected in the
color wells. You can click the Color radio button and change the background color to
match the page background. If your image has a colored background, you can change
the menu item background to be the same color - simply click the Color radio button
and change the color in the color wells to match the background color of the image.
You can also adjust the background color of the main menu box to match the image's
background color, as outlined below in the Borders instructions on this page.
• If you are using a horizontal navigation menu, selecting Image for the menu item
animation background, will automatically change your menu orientation to Horz Fixed
to ensure equal proportions for each menu item so the text will line up properly on top
of the image. You may need to adjust the value in the Item Width setting to account for
the width of the image used. As well, you may need to adjust the inside margins of the
menu items, as outlined below in the Borders instructions on this page.
Navigation Format for Pages in a Group
The Navigation Format section offers three different options for Group pages in your
navigation menu - you can choose to show the main navigation only (top level pages
only), to only show the pages within the group, or to show both the top level pages and
the pages within the group. On first take, you may think "What??" These options simply
give you another way to display the group pages as an alternative to just using the
thumbnail navigation that shows up on each group page. The format options also
include adjusting the space between menu items, as well as an Indent option for
vertical sub menus. The following outlines what each option means and how to use it:
1. Single - Top Level Pages: This option is single leveled and displays only the top
level pages in your navigation menu. This means the group page will not show the
album pages in the navigation menu. When a Group page is clicked, it will only show
the album pages as a clickable thumbnail display on the page. Visitors click the
thumbnail to enter the corresponding page and must click back to get back to the main
group index page and main navigation menu. To use this option in your navigation
menu, simply click the radio button labeled Single - Top Level Pages.
2. Single - Pages in Group: This option is also single-leveled and displays only the
pages in the Group when someone navigates to one of the album pages within that
group. This option allows visitors to click through all of the different albums in a
particular group without having to return to the main group page each time. The group
page will not show the album pages in the navigation menu, it will only show the pages
as a clickable thumbnail navigation on the page, the same way it does with the Single -
Top Level Pages option.
When someone clicks on an album page, the rest of the main navigation items will
disappear from the main menu, displaying only the Group page plus the album pages
contained within it. When clicking back to the main group page, the rest of the main
navigation will show up again, while the group album pages will disappear from the
menu. For example, this manual uses the Pages in Group option for all group pages.
You can see in the navigation to the left, that only the pages for this chapter are
showing. If you click on the chapter heading - 7. Create Your Own Design - you will be
returned back to the main navigation which does not display any group sub pages.
We've also turned the photo album off for the group page so as not to display any
thumbnails on it.
To activate this option for your group pages, first select an album page from the
desired group. Then click the radio button labeled Single - Pages in Group. Make sure
these pages are already set to "Show" in your Page Settings in the Content window,
otherwise they will not show up. If the album pages are all using the same template,
you will only need to click the option for one of the pages and it will be applied to all
pages within that same group.
3. Main & Submenus: This option is two-tiered and displays your main menu as well
as the pages in a group when someone clicks on a group page from the navigation
menu. The sub menu of pages in the group will not display upon hovering on the group
item, but rather upon clicking on the group item. The sub menu will display below the
corresponding group item in the navigation menu, and will run horizontally for a
horizontal-oriented menu or vertically for vertical-oriented menu. You cannot display a
vertical sub menu with a horizontal main menu.
The sub menu fonts contain a couple of extra editing options independent of the main
menu fonts:
• Submenu Indent: The last option under the Navigation Format section, lets you
indent your sub-menu text from the main group menu item. The indent cannot be
applied to horizontal menus; it can only be applied to vertical sub menus. Click on the
spin box control labeled Indent Submenus to increase or decrease the indent for the
submenu text. As you make the adjustments, you can view the results in the layout
viewer window. To have no indent, just leave the value set to '0'.
• Submenu Font Size: Under the Fonts
section of the Navigation tab, you will see an
option to adjust the font size for your submenu
text. You can change the submenu font size
without affecting the size of the main menu font.
Click the spin box control labeled Submenu to
increase or decease the font size of the sub-
menu text.
Adjust the Space Between the Menu Items:
Just below the three navigation formatting options, another editing option is available,
entitled Space between menu items. This option makes it easy to quickly adjust the
space between each menu item within the main navigation menu. The spacing will also
be applied to any submenus you have in your navigation. Click the spin box control to
increase or decrease the amount of space between the menu items. You will see the
spacing change in the layout viewer window as you make the adjustments.
───────────────────────────────────────
Navigation Borders
Click the Borders button to reveal more editing options for your navigation menu. The
Borders interface contains options for both the Menu Items and the main navigation
Menu. These options are the same with one exception: the Menu section contains an
additional option for setting the background color or using an image for the
background of the main navigation box. The background options for the menu items
are available under the Menu Item Animation section of the Properties interface, as
discussed above.
Menu Item Editing Options
Click the Menu Item radio button to reveal the available options. The options here work
the same way as the Border options previously described in the Text Tab section of
this chapter. To recap how to apply borders and set margins, please see section 7.3
The Text Tab. The borders and margins for the menu items apply to the box around
each menu item (not the main menu surrounding box) and the text of each menu item.
There are some key points to keep in mind when editing the inside margins of the
menu items:
• The menu items are separate elements from the main navigation menu. Anything
you do to the menu items will not be applied to the main menu.
• Use the Border settings to apply borders to the menu items to give them separating
lines within the menu. Use the Inside Margins setting to align the text used in the
menu items.
• If you chose to use a background graphic for your menu item animation states
(while under navigation Properties), you may need to adjust the margins to align the
text properly on top of the graphic. You can increase or decrease the left and right
margins to move the text over further to the left or right side, and increase or
decrease the top and bottom margins to move the text up or down until it is in the
correct position on the graphic.
Navigation Menu Editing Options:
Click the Menu radio button to reveal the available options for the borders, margins,
and background of your main navigation menu. The border settings are applied to the
main navigation box only (the box that surrounds or encompasses the menu items).
The inside margins will move the menu items over (or up/down) including any graphics
contained within the menu items. The margins can also be used to add some color to
the top and bottom of the navigation menu, by increasing the top and bottom margin
settings, as well as to increase the height of the menu. A background graphic can also
be added to the main menu box. These options are exactly the same as they are for
the other elements and work the same way. To review how to use the border tools,
please see The Text Tab page.
───────────────────────────────────────
