Tbmguide

PVII Tab Bar Magic Page 1 of 85
Tab Bar Magic by PVII
©2005 Project Seven Development Page 1 of 85

Contents
Tab Bar Magic by PVII ............................................................................................................................ 1

Introduction........................................................................................................................................ 4
1. Before you begin............................................................................................................................. 5
Backup your product file .................................................................................................................. 5
Move your Tab Bar Magic files to a Dreamweaver site................................................................... 5
Install the Tab Bar Magic extension................................................................................................. 6
2. Creating your first menu............................................................................................................... 7
Open the included workpage document ........................................................................................... 7
Insert a basic menu ........................................................................................................................... 8
Set the current page link ................................................................................................................. 11
3. Positioning a menu...................................................................................................................... 14
Center the content and menu tables ................................................................................................ 14
4. Menu style switching................................................................................................................... 15
Switching the Menu Style............................................................................................................... 15
5. Editing menu colors .................................................................................................................... 17
Setting CSS preferences ................................................................................................................. 17
Changing the top-level menu item colors....................................................................................... 18
Changing the menubar color........................................................................................................... 20
Changing the top-level hover color ................................................................................................ 21
Changing the top-level down state colors....................................................................................... 21
Changing the sub-menu item color................................................................................................. 22
Changing the sub-menu current page highlight color..................................................................... 22
6. Backing up and restoring style sheets............................................................................................. 24
A) Backing up an edited style sheet for future use......................................................................... 24
B) Deleting an edited style sheet and restoring the original........................................................... 24
C. Restoring the custom orange-green style sheet.......................................................................... 26
7. CSS rule-by-rule analysis............................................................................................................ 27
Create a menu using the Grunge style ............................................................................................ 27
Analyzing the Grunge style sheet ................................................................................................... 28
8. Image-based menus .................................................................................................................... 36
Creating an image-based menu....................................................................................................... 36
9. Support Options........................................................................................................................... 41
PVII InfoBase ................................................................................................................................. 41
Newsgroup discussion forums........................................................................................................ 41
Before you Contact us .................................................................................................................... 42
snail mail......................................................................................................................................... 42
Appendix I: Extension help ............................................................................................................ 43
Overview......................................................................................................................................... 43
Open the PVII TabBar Magic interface.......................................................................................... 43

Managing the Menu List................................................................................................................. 45

Managing the Menu Options .......................................................................................................... 48
The Interface Control Buttons ........................................................................................................ 50
Modifying a Tab Bar Menu ............................................................................................................ 51
Managing the Menu List................................................................................................................. 53
Managing the Menu Options .......................................................................................................... 56
Removing a PVII TabBar Magic Menu.......................................................................................... 59
Advanced Current Marker .............................................................................................................. 62
PVII TabBar Magic - Link Text Marking Option .......................................................................... 67
URL Match Option ......................................................................................................................... 70
Folder: Text Match Option ............................................................................................................. 73
Removing Advanced Marker Options ............................................................................................ 79
PVII TabBar Magic - Image Naming Convention ......................................................................... 81
Using PVII TabBar Magic in a Dreamweaver Template ............................................................... 83

INTRODUCTION
This document will teach you how to effectively use Tab Bar Magic, a powerful menu- building tool from PVII.
Tab Bar Magic is a Dreamweaver extension and comes with an installation program to automatically integrate
it into the Dreamweaver interface. Please read this guide in its entirety and keep it handy for reference as you
use the Tab Bar Magic system.
The major sections in this guide are:
• Before you begin

• Creating your first menu
• Positioning a menu
• Menu style switching
• Editing menu colors
• Backing up and restoring style sheets
• CSS rule-by-rule analysis of the "Grunge Style"

• Using the bonus image files to create an image-based menu
• Support options
• Appendix I: Extension help

The first eight sections are tutorial-based and focused on customizing the look of your menu. Appendix I takes you
step-by-step through the interface and discusses all of the system's capabilities. Appendix I is where you will learn
how to manage and edit menu items, add links, move links, delete links, add sub-menus, and lots more. You'll also
learn what each menu option does, how to use the Advanced Current Marker system, how to delete a menu, image
naming conventions, and how to use Tab Bar Magic in a Dreamweaver Template.

1. BEFORE YOU BEGIN
Backup your product file

Make a backup copy of the P7_TBM.zip archive and move it to a safe location. You'll also be moving your Tab Bar
Magic files into a Dreamweaver site and installing the Tab Bar Magic extension.
Move your Tab Bar Magic files to a Dreamweaver site

Create a new folder inside a defined Dreamweaver site. Name the folder TBM.
Important: If you are not sure what a Defined Dreamweaver site, please refer to the Dreamweaver help documentation topic: Getting Started with
Dreamweaver. You can also access a PVII site definition tutorial here. You must be working within a properly defined Dreamweaver site to use
Tab Bar Magic.
Unzip the original P7_TBM.zip archive. You'll find two folders in the archive's root (bonus and user_guide), as well
as four files: license.htm, P7_TBM.mxp, readme_first.htm, and workpage.htm.
Note: If you do not see any folders, that means your zip program is not set up properly. See your program's help file or contact the vendor to learn
how the program should be set so that folder structure is preserved.

Using Windows File Explorer or Mac Finder, move the unzipped contents of the P7_TBM archive to the new TBM
folder you created in your Dreamweaver site.
Start Dreamweaver and open the Files panel (F8). When you expand the TBM folder, your Files panel should look
similar to this:
Install the Tab Bar Magic extension

In Dreamweaver's Files panel, locate the extension installer file: P7_TBM.mxp. and double-click it. The Extension
Manager will launch and the installation will begin.
Follow the onscreen prompts and dialogs.
When the installation has completed, close the Extension Manager.
Restart Dreamweaver to make the extension available.

2. CREATING YOUR FIRST MENU

Tab Bar Magic (TBM) is a powerful and automated system that's easy to use. Let's create some menus and see just
how powerful, automated, and easy TBM is to use. We've provided a starter page to use for this exercise. We'll insert
a basic menu, then we'll change the menu style - trying all 9 included menu "skins".
Open the included workpage document

From your Files panel (F8), open workpage.htm.
The workpage is a simple table-based layout with one table for the menu and another, 2-column table below it for
content. We've assigned a 3em bottom margin to the menu table, providing a "buffer zone" for our Tab Bar's sub-
menus. Tab Bar Magic menus can be inserted into tables or CSS-positioned DIVs.
Tip: If you are new to CSS, you can use the workpage as a solid starting point for building your own pages.

Insert a basic menu

Your first assignment is to insert a basic Tab Bar Magic menu into the table that says "Insert menu here".
Backspace over the words "Insert menu here" until all the letters are deleted.
Click the Tab Bar Magic icon in the Common section of Dreamweaver's Insert Bar (or choose Insert - Studio VII -
Tab Bar Magic by PVII).

The Tab Bar Magic UI will open.
Spend a moment looking around, but don't change anything yet - we'll be exploring the interface options later. Note
that the 01-Basic menu style is selected and a preview appears to the right.
Click OK.

The menu is automatically inserted where your cursor was:
Pretty easy, wasn't it? Now let's preview the menu in your favorite browser
Save your page.
Press F12 (or select File - Preview in Browser).
Close your browser and take a look at your Dreamweaver Files panel. When your menu was created, Tab Bar Magic
created a new folder in your site: p7tbm. This folder contains the menu CSS, script, and images.
Note: When you publish your site, make sure you upload the p7tbm folder, as well as your pages.

Set the current page link

When you previewed the page in your browser, there was no sub-menu visible and none of the top-level links were
highlighted. Tab Bar Magic automatically detects a match between the current page and a link in the menu. To see
this feature, we'll set one of the menu links to point to workpage.htm.
Click the Tab Bar Magic icon in the Common section of Dreamweaver's Insert Bar (or choose Modify - Studio VII -
Modify Tab Bar Magic by PVII).
Click the plus (+) sign next to Section 2 and then select Link 2.2.
In the Link URL box, type in workpage.htm (or click the Browse button to find the file).
Click OK

Linking Link 2.2 to workpage will cause Link 2.2 and its parent Section 2 to be highlighted. And because the Menu
Option Persistent Sub Menu is checked, the sub-menu containing Link 2.2 will automatically become visible
when the page is loaded.
In order for Dreamweaver to present real links, we'll need to make sure your preview preferences are not set to us a
temporary file.
Choose Edit - Preferences.
Select the Preview in Browser category.
Make sure the Preview using temporary file box is unchecked.
Click OK.
Save your page.

Press F12 to Preview.
When the page loads, both Section 2 and Link 2.2 are highlighted, indicating the current page and section.

3. POSITIONING A MENU
Our workpage fills the entire width of the browser window, but we can easily assign a fixed width and center the
layout.
Center the content and menu tables

Select the bottom content table: maintable on the Tag Selector bar.
Set the W (width) value to 750 pixels.

In the Align list, select Center.
Select the top table: menubar on the Tag Selector bar.
Set its width to 750 pixels and Align to Center.
The entire layout, menubar and content, is fixed width and centered:
Now's a good time to Save your page.
Note: If you want all individual menu items centered within the menu bar table, you must use the 08-Pure Center Menu Style. That style is
specially designed for the job. The other menu styles do not support pure text centering.

4. MENU STYLE SWITCHING

Switching menu styles or skins couldn't be easier. There are 9 included menu styles and the TBM system allows you
to instantly switch from one style to another.
Switching the Menu Style

Open the TBM interface (click the icon or use Dreamweaver's Modify menu).
Open the Menu Style list and select 02-Tomato.
Click OK
We have a Tomato-flavored menu:

Save and Preview:
The current page is still highlighted, too. Now go ahead and open the TBM UI again and change the Menu Style.
Continue until you've sampled all of the first 8 styles. We'll be using the special Image Base style in a later lesson.
After you're done sampling, set the Menu Style back to 01-Basic and Save your work.

5. EDITING MENU COLORS

Your workpage menu should be set to 01-Basic. We're going to change the default and hover colors by editing the
menu style sheet. We'll start by changing the default top-level item color to dark gray and its background color to
orange.
Before we begin, we'll configure Dreamweaver MX2004 and later to safely edit CSS. By default, Dreamweaver will
open your CSS file in the background when you edit CSS in your document's CSS panel. This can sometimes result in
lost edits.
Setting CSS preferences

Choose Edit - Preferences (Ctrl + U)
Under the When editing CSS rules heading, uncheck the box next to Open CSS files when modified.
Click OK.

Changing the top-level menu item colors

Open your CSS panel. If you cannot find it, choose Window - CSS Styles.
Inside the style sheet p7tbm_basic_01.css, find the rule #p7TBMroot .p7TBMtext li a.
Right-click (Command-click Mac) the rule name and choose Edit...
Select the Type Category.
Set the Color to #333333.
Switch to the Background Category.

Set Background color to #FF9900.

Click OK.
The top-level menu items are now orange.
The top-level menu items are now orange - but the menubar area to the right of the last item is still white. Let's
change that to orange, too.

Changing the menubar color

Open your CSS panel.
Inside the style sheet p7tbm_basic_01.css, find the rule #p7TBMroot ul.
Select the Background Category.
Set the Color to #FF9900.
Click OK
The menubar is now a matching orange.
Now let's change the hover background color of the top-level menu items from tan to teal green and the text color to
white.

Changing the top-level hover color

Inside the style sheet p7tbm_basic_01.css, find the rule #.p7ie6Fix:active, #p7TBMroot .p7TBMtext
.p7TBMon, #p7TBMroot .p7TBMtext li a:focus, #p7TBMroot .p7TBMtext li a:active.
Select the Text Category.
Set the Color to #FFFFFF.
Set the Background color to #669999.
We'll need to preview the page in a browser to test the hover effect.
The top-level down state style, highlighting Section 2, is still dark gray. Let's change its background to bright green
and its color to white.
Changing the top-level down state colors

Inside the style sheet p7tbm_basic_01.css, find the rule #p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot
.p7TBMtext .p7TBMdown:hover.
Set the Background color to #33CC00.
We'll need to preview the page in a browser to test the effect.
That takes care of our top-level items, now let's edit the sub-menu links. We'll change the default color to dark
orange. Then we'll change the hover background from tan to orange and the hover text color to white.

Changing the sub-menu item color

Inside the style sheet p7tbm_basic_01.css, find the rule #.p7TBMsub li a.

Set the Color to #FF6600.
Go back to your CSS panel.
Find the rule #.p7TBMsub li a:hover, .p7TBMsub li a:active, .p7TBMsub li a:focus.

Change the Background color to #FF9900.
We'll need to preview the page in a browser to see the sub-menu.
Now let's change the current page highlight in the sub-menu from dark gray to bright green. We'll also set
background color to white and border color to white so that when the current page link is hovered over, it does not
change.
Changing the sub-menu current page highlight color

Inside the style sheet p7tbm_basic_01.css, find the rule #.p7TBMsub .p7TBMmark, .p7TBMsub
.p7TBMmark:hover, .p7TBMsub .p7TBMmark:active, .p7TBMsub .p7TBMmark:focus.
Set the Color to #33CC00.
Change the Background color to #FFFFFF.
Switch to the Border Category.

Change the Border color to #FFFFFF.

We'll need to preview the page in a browser.
Because TBM uses CSS, you have total control over how your menus look. As you get more and more advanced in
your CSS skills, the effects you will be able to accomplish will get more advanced, as well. If you're new to CSS, go
slow and test after every change.

6. BACKING UP AND RESTORING STYLE SHEETS

Should you ever reach a point where you'd like to restore back to a menu style sheet's original state, the TBM system
allows you to do that easily. You simply delete the style sheet you edited, open the TBM UI, and just click OK. TBM
will look inside the p7tbm folder for the associated style sheet (in this case, p7tbm_basic_01.css). If it's found,
nothing will happen and your edits will be preserved.
If, however, the file is not there, TBM will build a new one for you. If you want to restore back to the original style
sheet, but would also like to save your edited style sheet for future use, then you can do that, too - by making a
backup of your edited style sheet.
Follow steps A, B, and C below.
A) Backing up an edited style sheet for future use

In your files panel, double-click p7tbm_basic_01.css to open it.
Choose File - Save As.
Save the file as p7tbm_basic_01_custom_orange-green.css in your p7tbm folder.

Close all open CSS files.
B) Deleting an edited style sheet and restoring the original

In your Files panel, expand the p7tbm folder and select the style sheet you want to replace. In this case, select
p7tbm_basic_01.css.
Press your Delete key to delete the file.

You will receive a warning.
Click Yes to complete the deletion.

Depending on your Dreamweaver version, your menu might still appear to be styled. If so, save and close the
workpage document, then reopen it. Your menu style is gone.
Open the TBM UI using either the Insert Bar icon or the Modify menu.
Make no changes - simply click OK.
TBM will write a new p7tbm_basic_01.css file in the p7tbm folder and your menu will restore back to the original
Basic-01 style.

C. Restoring the custom orange-green style sheet

In your Files panel, expand the p7tbm folder and double-click p7tbm_basic_01_custom_orange-green.css to
open it.
Choose File - Save As.
Save the file as p7tbm_basic_01.css.

Close all open style sheets.
Your menu in workpage.htm is orange again.
Save and close all files.

7. CSS RULE-BY-RULE ANALYSIS

You should now have a good understanding of how easy it is to customize the look of a Tab Bar Magic menu. The 01-
Basic menu style uses no images. Most of the other menu styles utilize CSS-driven background images behind the
text to give the menu more of a graphical look. Let's analyze the 07-Grunge style sheet, which uses several
background images.
Create a menu using the Grunge style

Open workpage.htm
Open the TBM UI using either the Insert Bar icon or the Modify menu.
Set the Menu Style to 07-Grunge.

Click OK
Aside from being a very cool looking design, the Grunge style makes very creative use of background images to
make a pure text menu look very graphical. Let's explore the Grunge style sheet, rule-by-rule.
In your Files panel, expand the p7tbm folder and double-click p7tbm_grunge_07.css to open the CSS file.

Analyzing the Grunge style sheet

p7tbm_grunge_07.css
This rule defines the root of the menu - the element that wraps the entire menu. We set the font-
family here and it applies to every item in the root and sub-menu structures.
This element is the outer wrapper for the top-level (root) menu items. Font size is set for the top-leve items (Section
1 - Section 4). Top and left borders are set to a slightly lighter shade than the bottom and right borders to create a
subtle raised look to the root menu bar. We assign a background image, which looks like this:
The image, which is actually 200px square, creates a seamless grunge tile on the root menu bar. The tile will expand
with the menu bar both horizontally and vertically.
Note: We've provide editable Fireworks documents for each of the menu styles that uses background images. The Fireworks docs can be found in
the bonus folder. To edit the Grunge images, for example, you would open grunge_07.png in Fireworks.
Padding is set to zero.

This element is nested inside #p7TBMroot and also wraps the root menu. Grunge does not use this
selector, but it can come in handy for advanced CSS authors who might want to use an additional
background image.
This rule is not used in Grunge. It's included as a convenience in the event you wanted to convert the
Grunge style to use embedded images for the root menu items. This rule would prevent default
borders from being drawn by the browser around images that are inside <a> tags.
The root menu items are all part of an unordered list - a <ul>. This selector styles the UL. Margin is set to zero and
padding is set to zero, except for the left - which is set to 52px. This is done to leave enough space for the "ring-
binder" background graphic:
The graphic is a 52px square set to tile vertically (repeat-y) only. The rings will expand vertically,
along with the menu, in the event a user sets a larger text size, for example.

This rule turns off bullets for the root menu items. Display is set to inline, which causes the menu
items to display horizontally, instead of vertically.
This rule describes the links inside the root menu items. We float them to the left to eliminate
horizontal gaps between the items.
TBM assigns a special class to the root menu UL, depending on whether the root menu items are text
or images. We set text color. Padding is set to 18 pixels top and bottom to expand the height of the
root menu, accentuating the rings graphic. Text decoration is turned off (no underlines), a dark gray
right border is set, and font-weight is bold.

This multiple selector sets the down state for root menu items. This is the highlighted state associated
with the current page marker. Color is set to dark gray, font-weight bold, and background to mustard
yellow. Color and background are given an !important status to lock their attributes in - to prevent
being overridden by competing or conflicting rules.
This rule sets the hover style for the root menu items. It also works in tandem with the TBM system
to allow the hover state to "stick" while a root item's sub-menu is open. We set color to white,
background color to dark gray, and turned background images off so that the Grunge tile does not
show through.

This element is the outer wrapper for all of the sub-menus. Font-size is set for all sub-menu items.
Position is set to relative, which allows all of the sub-menus to correctly align to the left edge of the
menu bar.
Height is set to auto. You can use the height property to create a "buffer zone" for your sub-menus so
that they won't overlap the content below them. If you leave the value set to auto, then you would use
padding or margins on your page elements to create the buffer. In workpage.htm, for example, the
menubar table was given a bottom margin of 3em. If menubar was not assigned a bottom margin,
setting this rule's height to 3em would accomplish the same thing.
This element is the outer container for each sub-menu. We set its position to absolute so that the sub-menus are
properly aligned and out of the page flow. They are hidden, allowing the TBM script to control their visibility.
Tip: If you'd like a specific sub-menu to be visible in browsers that have script disabled, you can create a special selector for that. This new CSS
rule would not go in your menu style sheet, it would need to be embedded separately in each page. Every TBM sub-menu is assigned an ID. The
first sub-menu, for example, has an ID="p7TBMsub01" - the number at the end relates to the menu. The rule you create would be: #p7TBMsub01
{visibilitiy: visible !important;}. The menu will work normally, but if script is disabled in the browser, your new CSS rule will cause it to be visible.
The left and top positions are set to zero and width set to 100%. These properties should not be changed.

This element is the inner container for each sub-menu. We assigned a top padding of 6px and a
bottom padding of 16px to heighten the sub-menu box. This provides a visual space between the sub-
menu and the root menu and also provides a bit of breathing room at the bottom of the sub-menus to
prevent inadvertant menu closure when a user's cursor encounters the bottom of a sub-menu item.
The sub-menu items are all part of an unordered list - a <ul>. This selector styles the UL. Margin and
padding are set to zero. A special transparent background image is assigned, which ensures proper
behavior in IE Windows. Do not remove it.
Background color and border are placeholders. In the event you do not set a persistent sub-menu you
might want to remove the "buffer zone" between the menu and your page content and allow the sub-
menus to overlap the content. If you do that, you probably would want to assign a background color
and border to the sub-menu to provide a visual break.
This rule turns off bullets for the sub-menu list items. Display is set to inline, which causes the menu
items to display horizontally, instead of vertically.

This rule describes the links inside the sub-menu items. We set text color to medium gray, padding to
6px all around, and display to block - which allows them to look at act like image buttons. We float
them to the left to eliminate horizontal gaps and set a white border. The white border matches the
page background when the menu is at rest and is set so that we can assign a dark border on hover.
Adding a border on hover, without having a border on the default state, would cause the browser to
jump.
We set the hover (mouse over), active (mouse down), and focus (on tab entry) states. Color is set to
dark gray, as is border color. Background color is set to mustard yellow.
This special rule describes any BR tag inside the menu system. We use a BR at the end of each LI to
clear the floats. This allows the height of the floated links to cause containing elements to expand
along with them. Without the BRs, and this rule, the background colors and images assigned to the
root and sub-menu containers, would not render correctly - or at all.

This rule styles the highlighted current page link in the sub-menus. We set it bold, color is dark gray,
and background-color white. Cursor is set to default - an arrow rather than a hand. If you'd rather the
hand, change the value of this property to pointer.

8. IMAGE-BASED MENUS
Tab Bar Magic supports images for root menu items and will automatically handle image preloading and swap
states. This automation requires only that you follow the TBM image file name convention. The file names of your
root images can be anything you like. However, you must follow a naming convention for the over and down images.
For example, if your default image is named section1.gif, then the over image would be: section1_f2.gif and the
down image would be: section1_f3.gif.
Creating an image-based menu

We included a set of bonus images for this exercise - and a workpage.
In your Files panel, expand the bonus folder and double-click bonus.htm to open it.
Backspace over the words Insert menu here until they are all gone.
Click the Tab Bar Magic icon in the Common section of Dreamweaver's Insert Bar (or choose Insert - Studio VII -
Tab Bar Magic by PVII).
Select Section 1.
Click the Browse... button to the right of the Image Path box.
Browse to the bonus_images folder inside the bonus folder.
Select tomato_01.jpg
Select Section 2 .

Browse to the bonus_images folder again.

Select Section 3 .
Select Section 4 .
Set the Menu Style to 09-Image Base.
Leave all other options alone and...
Click OK.

Save the page and preview in your browser.
Now let's set a current page link…

Open the TBM UI again.
Expand Section 2 and select Link 2.1

Set the Link URL to bonus.htm
Click OK

Save and preview in your browser
It really is that easy.
If you'd like to edit the bonus images, you'll find a Fireworks document named tomato_img.png inside the
bonus/fireworks folder.

9. SUPPORT OPTIONS
PVII quality does not end with your purchase - it continues with the best customer support in the business.
PVII InfoBase
The PVII infoBase is an online PVII application allowing you to access dozens of Tech Notes, tips, and techniques
relating to our products, as well as to general web development issues..
Open the PVII Infobase
Newsgroup discussion forums

The Project VII Webdev Newsgroup is our primary support vehicle and is available 24 hours a day.
The PVII Webdev Newsgroup | The PVII CSS Newsgroup
If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new
account and point it at the following server:
forums.projectseven.com
If you don't know how to set up a news account in Outlook Express or Entourage, Microsoft has dedicated
instructions pages:
Mac Users Read more | PC Users Read more
Mac Users: As of this writing the latest versions of OSX install neither Outlook Express nor any other news reader
software. If you need a newsreader you will have to purchase one or download a free one from, for example, Mozilla.

Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that came with your product.
Please include your Dreamweaver version, as well as your computer operating system type in all support
correspondences.
E-Mail:
support@projectseven.com
Phones:
330-650-3675
336-374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.
Calls should be limited to general customer service inquiries only. Product support is available via our Newsgroup.
snail mail
Project Seven Development
2684 Rockford Road
Dobson, NC 27017-8376

APPENDIX I: EXTENSION HELP
Overview
Tab Bar Magic menus can be inserted inside CSS-Positioned DIVs, Dreamweaver Layers, or even inside table cells.
The menu will be created wherever your cursor is located - so be sure that your cursor is inside the page element in
which you want the menu to be inserted. This element should be an appropriate container for the menu. Be sure that
you insert the menu into an element is that is wide enough to fit all of the top-level (root) links.
The Tab Bar Magic system is also designed to be completely compatible within Dreamweaver Templates.
About the Tab Bar Magic Menu Files
When your menu is built the system will create a folder named p7tbm in the same folder that your page is in. The
p7tbm folder contains the TabBar Magic JavaScript file and related CSS (style sheet) files. The system will also
create an img folder inside the p7tbm folder. The img folder contains the background images related to the
particular menu style you are using.
Note: The system will always create the p7tbm folder in the same folder as your current page. This allows you to create different TabBar Magic
menus, within the same site, without sharing any of the menu assets.
Open the PVII TabBar Magic interface

Click the TabBar Magic icon in the Common category of the Insert Toolbar.
Alternatively, you can use the main Dreamweaver menu by choosing:

Insert > Studio VII > TabBar Magic by PVII...

The Insert TabBar Magic interface will open.
The interface is divided in two sections. The top section is where you add, delete, modify or reposition the menu
items. The bottom section allows you to set various options that control the menu's appearance and functionality.

Managing the Menu List

The MenuList displays the menu items and the related submenu items in the current menu. The interface is pre-
populated with a set of "boilerplate" menu items already defined to serve as a model for your own menu. You can
simply modify each of these existing menu items and add or delete items as needed.
Each section can be expanded or collapsed by clicking the plus (+) or minus (-) sign (right arrow or down arrow on
the Mac) next to each menu item. Click (select) on a menu item to make it the current selection. The link's editable
attributes are displayed in the Image Path, Link / Alt Text and Link URL boxes.
Add Link
Click the Add Link button to create a new item in the menu. This new item will be created immediately after the
selected item, and at the same level as the selected item. The newly created menu item will initially appear with
the default description: Link Text, and the url will simply be a hash (#) placeholder. Change these to suit your needs.
The Image Path box is always blank by default.
Add Sub
Click the Add Sub button to create a new submenu for the selected root link item. A new menu item will appear
directly beneath the selected menu item, indented one level. The newly created menu item will initially appear
with the default description: Link Text, and the url will simply be a hash (#). Change these to suit your needs. The
Image Path box is always blank by default.
Note: The TabBar Magic menu is designed to use just one submenu per root menu link. The Add Sub button will be unavailable (grayed out) if the
currently selected menu item is a sub menu item.
Delete
Click the Delete button to remove the selected menu item. If the menu item contains a sub menu level (children),
the system will provide a confirmation box before deleting the menu item. The system will completely remove the
selected menu item and its sub menu level.
Note: The interface requires at least one item to be in the menu list at all times. The system will not allow you to delete the only remaining menu
item.

Up
Click the Up button to move the selected menu item up in the Menu List. The menu item, and its sub menu level
items, be moved up one position each time the Up button is clicked. If the menu section before the selected item
is in the open state (sub menu items showing) then the selected menu item will be moved to the last position of the
open menu section.
Down
Click the Down button to move the selected menu item down in the Menu List. The menu item, and its sub menu
level items, will be moved down one position each time the Down button is clicked. If the menu section after the
selected item is in the open state (sub menu items showing) then the selected menu item will be moved to the first
position of the open menu section.
Image Path / Browse...
Note: The Image Path box is only used if you are using images for your menu buttons. For text-based menus this box should be left empty.
Enter the path to your menu button image, or use the Browse button to open the Select Image Source dialog box.
You can change the image at any time by selecting the menu item and clicking the Browse... button. Valid image
types are: .gif, .jpg, .jpeg, and .png.
The image you select should always be the default button image. The system will automatically handle image
preloading for rollover and down-state images based on the Swap Option you select. The file names of your button
images can be anything you like. However, you must follow a naming convention for the swap images. For example,
if you name your default button image mybutton.gif, then the image you want to appear when users mouse over it
would be mybutton_f2.gif and the image you would want to designate the down-state would be named
mybutton_f3.gif.
This naming convention is also user-definable to allow easy configuration with the output of your image editor.
Note: The system will assume that the menu is image-based whenever there is a least one root menu item that contains an entry in the Image Path
box.

Link / Alt Text
The Link / Alt Text box is used by both image-based menus or text-based menus.
Text-Based Menus - Enter the text description (Link Text) for the menu item. Click the Tab key when finished
and the revised text will appear in the menu list. You can enter any type of text, including markup or dynamic code.
The system does not filter the text that you enter into this box. This field cannot be left blank.
Image-Based Menus - Enter the text description (Alt-Text) for the related image button, a brief description of
the menu button. This filed cannot be left blank.
Link URL / Browse...

Enter the path to the linked page for this menu item, or use the Browse button to open the Select the File to Link
dialog box. All pre-defined or newly added menu items have their link URL set to a hash mark (#). This is a
placeholder link only and should be changed to an actual page link.

Managing the Menu Options

This section of the interface allows you to select the style and operational characteristics of the menu.
Menu Style
The TabBar Magic system includes 9 pre-defined menu styles. Select the style that most closely represents the
styling goal of your particular menu. These styles are meant to serve as a starting point from which to begin your
customization process. The system also provides a "preview" of the selected menu style on the right side of the
interface. You can change the style at any time by using the Modify interface after your menu is built.
The 01-Basic style is always the default, and contains the least amount of pre-set styling. Choose this style when
you wish to fully customize the menu style without any pre-configured extra styling rules in the style sheet.
The 09-Image Base style is designed to be used for any menu that contains images. This style sheet is specially
built to allow for images in the root menu levels.
For complete details on each of these Menu Styles and their rule-by-rule discussion see the Styling Section of the TabBar Magic User Guide.
Image Swap
This setting is used for image-based menus only, it has no effect on text-based menus. The system will automatically
handle all of the image button rollover and down state effects, as well as handling all of the image preloading, based
on the swap option that you select:
-None
Choose None if you do not want any button effects. The menu buttons will remain static, with no effects on rollover,
and any down-state settings are ignored. The scripts will not preload any images.
-Down Only
The down-state button images are used, if needed, to display the selected Default menu button... which will swap to
the normal image on rollover. The scripts will preloads only the down state (_f3) images.

-Over and Down
Both the down-state (_f3) and the over (_f2) images will be used. The image will swap to the over (_f2) image on
rollover for both the normal buttons and the Default button. The down-state and the over images will be preloaded.
-Use Over as Down
Use this option to save bandwidth or if you do not wish to have a separate set of images for your down-State. Only
the over (_f2) images will be used. The script will also use the over image as its down- state image for the default
button. The scripts will preload only the over (_f2) images.
Use Trigger Delay

By default the TabBar Magic system uses a built-in delay time to show the related sub menu when you mouse over
the root links. This assures that there is sufficient time to allow the user to mouse diagonally to one of the sub menu
links without accidentally triggering another menu button. The system is also designed to trigger the mouse over
image or style swaps on the root menu buttons instantaneously, which makes the submenu delay less apparent. You
can, however, turn this delay feature off completely by un-checking this box.
For Advanced Users - The default delay is set to 200ms. It is also possible to manually change the amount of delay that the system uses by
changing the delay amount in the P7_initTBM() behavior that is usually applied to the <body> tag, onLoad event:
<body onload="P7_initTBM(1,2,1,1,200,1)">
Change the 200 to the amount of delay (in milliseconds) that you prefer. The system will remember your changes and will not overwrite this setting
when you later use the Modify system.
Persistent Sub Menu
Check this box the set the sub menu that is related to the current (down-state) menu button to always be visible
(persistent) except when other sub menus are showing. This assures that there is always a submenu relating to the
current page that is visible, and thus, available to users with the Tab Key and assistive readers. This is the default
for TabBar magic and assures that the menu system is as accessible as possible. Uncheck this box is you do not want
this behavior.

Activate Root Links

All of the links in the menu should contain a link to an actual page in order to provide the best accessibility for all
users. This box allows you to control the way the system responds when the user clicks on one of the root menu
buttons. When this box is unchecked then the system will always ignore the link and just process the menu down
state action. When this box is checked the system will allow the click and load the new page, but only if the link is not
a null link or is not the same as the current page. This feature allows the menu to be used in frames-based or
Iframes-based site where the menu is in a static page. It also prevents the page from re-loading if the link is to the
same page as the current page. The Activate Root Links box is checked by default and is usually the preferred
deployment.
The Interface Control Buttons
OK
When you are done defining your menu and setting the menu options, click the OK button to build the menu.
The system will verify your option settings and either alert you to any problems that need your attention or
build the completed, fully functional menu on your page. You can preview in a browser to operate the menu
and check its functionality. To make further changes, you will use the Modify TabBar Magic system.
Cancel
Click the Cancel button to completely abort the current Insert TabBar Magic operation. This will close the interface
and no changes will be made to your page.
Help
Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference
while you continue working with the TabBar Magic interface.

Modifying a Tab Bar Menu
Overview
You can modify all aspects of an existing TabBar Magic system at any time. The system will allow you to edit, add,
delete, or reposition the menu items as you like. You can also use the Modify system to quickly change from text
triggers to image triggers, or even change between any of the pre-defined Menu Styles... in short, you can change
every aspect of the menu system at any time.
The system will automatically detect of there is an existing TabBar Magic system on your page and, if so, it will open
the Modify interface.When the Modify interface first opens, the system will identify the Menu Style you are using
and will populate all of the interface options based on the existing menu on your page.
The TabBar Magic system is also designed to be completely compatible within Dreamweaver Templates. See the
TabBar Magic in a Template page for details.
Open the PVII TabBar Magic Modify interface
-Click the TabBar Magic icon in the Common category of the Insert Toolbar.
Alternatively, you can use the main Dreamweaver menu by choosing:

Modify > Studio VII > TabBar Magic by PVII...
The Modify TabBar Magic interface will open.

All of the menu items, links and options in your existing TabBar Menu will be presented in the interface.
The interface is divided in two sections. The top section is where you add, delete, modify or reposition the menu
items. The bottom section allows you to set various options that control the menu's appearance and functionality.

Managing the Menu List

The MenuList displays the menu items and the related submenu items in the current menu. The interface is pre-
populated with a set of "boilerplate" menu items already defined to serve as a model for your own menu. You can
simply modify each of these existing menu items and add or delete items as needed.
Each section can be expanded or collapsed by clicking the plus (+) or minus (-) sign (right arrow or down arrow on
the Mac) next to each menu item. Click (select) on a menu item to make it the current selection. The link's editable
attributes are displayed in the Image Path, Link / Alt Text and Link URL boxes.
Add Link
Click the Add Link button to create a new item in the menu. This new item will be created immediately after the
selected item, and at the same level as the selected item. The newly created menu item will initially appear with
the default description: Link Text, and the url will simply be a hash (#) placeholder. Change these to suit your needs.
The Image Path box is always blank by default.
Add Sub
Click the Add Sub button to create a new submenu for the selected root link item. A new menu item will appear
directly beneath the selected menu item, indented one level. The newly created menu item will initially appear
with the default description: Link Text, and the url will simply be a hash (#). Change these to suit your needs. The
Image Path box is always blank by default.
Note: The TabBar Magic menu is designed to use just one submenu per root menu link. The Add Sub button will be unavailable (grayed out) if the
currently selected menu item is a sub menu item.
Delete
Click the Delete button to remove the selected menu item. If the menu item contains a sub menu level (children),
the system will provide a confirmation box before deleting the menu item. The system will completely remove the
selected menu item and its sub menu level.
Note: The interface requires at least one item to be in the menu list at all times. The system will not allow you to delete the only remaining menu
item.
Up

Click the Up button to move the selected menu item up in the Menu List. The menu item, and its sub menu level
items, be be moved up one position each time the Up button is clicked. If the menu section before the selected item
is in the open state (sub menu items showing) then the selected menu item will be moved to the last position of the
open menu section.
Down
Click the Down button to move the selected menu item down in the Menu List. The menu item, and its sub menu
level items, will be moved down one position each time the Down button is clicked. If the menu section after the
selected item is in the open state (sub menu items showing) then the selected menu item will be moved to the first
position of the open menu section.
Image Path / Browse...
Note: The Image Path box is only used if you are using images for your menu buttons. For text-based menus this box should be left empty.
Enter the path to your menu button image, or use the Browse button to open the Select Image Source dialog box.
You can change the image at any time by selecting the menu item and clicking the Browse... button. Valid image
types are: .gif, .jpg, .jpeg, and .png.
The image you select should always be the default button image. The system will automatically handle image
preloading for rollover and down-state images based on the Swap Option you select. The file names of your button
images can be anything you like. However, you must follow a naming convention for the swap images. For example,
if you name your default button image mybutton.gif, then the image you want to appear when users mouse over it
would be mybutton_f2.gif and the image you would want to designate the down-state would be named
mybutton_f3.gif.
This naming convention is also user-definable to allow easy configuration with the output of your image editor.
Review "TabBar Menu Image Naming Convention" for complete details on this feature.
Note: The system will assume that the menu is image-based whenever there is a least one root menu item that contains an entry in the Image Path
box.
Link / Alt Text
The Link / Alt Text box is used by both image-based menus or text-based menus.
Text-Based Menus - Enter the text description (Link Text) for the menu item. Click the Tab key when finished
and the revised text will appear in the menu list. You can enter any type of text, including markup or dynamic code.
The system does not filter the the text that you enter into this box. This field cannot be left blank.

Image-Based Menus - Enter the text description (Alt-Text) for the related image button, a brief description of
the menu button. This filed cannot be left blank.
Link URL / Browse...

Enter the path to the linked page for this menu item, or use the Browse button to open the Select the File to Link
dialog box. All pre-defined or newly added menu items have their link URL set to a hash mark (#). This is a
placeholder link only and should be changed to an actual page link.

Managing the Menu Options

This section of the interface allows you to select the style and operational characteristics of the menu.
Menu Style
The TabBar Magic system includes 9 pre-defined menu styles. Select the style that most closely represents the
styling goal of your particular menu. These styles are meant to serve as a starting point from which to begin your
customization process. The system also provides a "preview" of the selected menu style on the right side of the
interface. You can change the style at any time.
The 01-Basic style is always the default, and contains the least amount of pre-set styling. Choose this style when
you wish to fully customize the menu style without any pre-configured extra styling rules in the style sheet.
The 09-Image Base style is designed to be used for any menu that contains images. This style sheet is specially
built to allow for images in the root menu levels.
For complete details on each of these Menu Styles and their rule-by-rule discussion see the Styling Section of the TabBar Magic User Guide.
Image Swap
This setting is used for image-based menus only, it has no effect on text-based menus. The system will automatically
handle all of the image button rollover and down state effects, as well as handling all of the image preloading, based
on the swap option that you select:
-None
Choose None if you do not want any button effects. The menu buttons will remain static, with no effects on rollover,
and any down-state settings are ignored. The scripts will not preload any images.
-Down Only
The down-state button images are used, if needed, to display the selected Default menu button... which will swap to
the normal image on rollover. The scripts will preloads only the down state (_f3) images.

-Over and Down
Both the down-state (_f3) and the over (_f2) images will be used. The image will swap to the over (_f2) image on
rollover for both the normal buttons and the Default button. The down-state and the over images will be preloaded.
-Use Over as Down
Use this option to save bandwidth or if you do not wish to have a separate set of images for your down-State. Only
the over (_f2) images will be used. The script will also use the over image as its down- state image for the default
button. The scripts will preload only the over (_f2) images.
Use Trigger Delay

By default the TabBar Magic system uses a built-in delay time to show the related sub menu when you mouse over
the root links. This assures that there is sufficient time to allow the user to mouse diagonally to one of the sub menu
links without accidentally triggering another menu button. The system is also designed to trigger the mouse over
image or style swaps on the root menu buttons instantaneously, which makes the submenu delay less apparent. You
can, however, turn this delay feature off completely by un-checking this box.
For Advanced Users - The default delay is set to 200ms. It is also possible to manually change the amount of delay that the system uses by
changing the delay amount in the P7_initTBM() behavior that is usually applied to the <body> tag, onLoad event:
<body onload="P7_initTBM(1,2,1,1,200,1)">
Change the 200 to the amount of delay (in milliseconds) that you prefer. The system will remember your changes and will not overwrite this setting
when you later use the Modify system.
Persistent Sub Menu

Check this box the set the sub menu that is related to the current (down-state) menu button to always be visible
(persistent) except when other sub menus are showing. This assures that there is always a submenu relating to the
current page that is visible, and thus, available to users with the Tab Key and assistive readers. This is the default
for TabBar magic and assures that the menu system is as accessible as possible. Uncheck this box is you do not want
this behavior.

Activate Root Links

All of the links in the menu should contain a link to an actual page in order to provide the best accessibility for all
users. This box allows you to control the way the system responds when the user clicks on one of the root menu
buttons. When this box is unchecked then the system will always ignore the link and just process the menu down
state action. When this box is checked the system will allow the click and load the new page, but only if the link is not
a null link or is not the same as the current page. This feature allows the menu to be used in frames-based or
Iframes-based site where the menu is in a static page. It also prevents the page from re-loading if the link is to the
same page as the current page. The Activate Root Links box is checked by default and is usually the preferred
deployment.
OK
When you are done defining your menu and setting the menu options, click the OK button to build the menu. The
system will verify your option settings and either alert you to any problems that need your attention or re-build the
modified, fully functional menu on your page. You can preview in a browser to operate the menu and check its
functionality. To make further changes, you will use the Modify TabBar Magic system.
Cancel
Click the Cancel button to completely abort the current Modify TabBar Magic operation. This will close the interface
and no changes will be made to your page.
Help

Removing a PVII TabBar Magic Menu
Overview
The TabBar Magic system includes a Remove feature that allows you to quickly remove an entire existing TabBar
Magic system from your page. This feature allows for easy removal when simply prototyping pages or when a total
redesign is necessary.
Open the Remove PVII TabBar Magic interface

-Open a page that contains a TabBar Magic menu.
-Choose Commands > Studio VII > TabBar Magic by PVII > Remove TabBar Magic Menu... to open the
Remove interface.
The Remove option will be unavailable (grayed out) in the menu if there is no TabBar Magic html markup on the page.
The Remove TabBar Magic interface will open.

The interface includes a Remove link to the PVII TabBar Magic style-sheet checkbox (checked by default)
that allows you to control whether the system should remove the existing link to the TBM style sheet.This allows you
to keep the link in case you have added other page styles to the file. If you wish to retain the link to the style sheet
uncheck this box.
What will be Removed

The Remove system will look for, and remove, all of the TabBar Magic components:
1. The TabBar Magic html menu markup. The entire root menu div and all of its contents, including the
unordered lists that contains the menu markup, will be removed
2. The link to the TabBar Magic JavaScript file will be removed.
3. The link to the TabBar Magic style sheet will be removed, if the Remove link to the PVII TabBar style-
sheet box is checked.
4. The TabBar Magic <body> onLoad events (if any) will be removed.
5. The TabBar Magic Advanced Current marker initialization scripts, if any, will be removed.
Note: Only the links to the external files will be removed. The actual JavaScript and CSS files will remain untouched.
What will Not be Removed

The system will not remove the p7tbm folder, which contains menu-related assets (images, JavaScript file, and
CSS files). This ensures that you will not lose any assets you may have modified and any pages that depend on those
modified assets will continue to look and behave as expected.

Remove
Click the Remove button. The entire TabBar Magic system and related markup will be removed from the page
Cancel
Click the Cancel button to completely abort the current Remove TabBar Magic operation. This will close the
interface and no changes will be made to your page.
Help

Advanced Current Marker
Overview
The TabBar Magic system includes a built-in feature that applies a Current Marker to the link in the menu that
matches the current page's url. The system sets this link, and link's parent menu section, to a special style class
named p7TBMmark. The system will also automatically set the corresponding root menu item to the "down" state,
the p7TBMdown style class. This provides a visual trail to the current page in the menu - a "you are here"
indicator.
This system works automatically, without user intervention - but it does rely on matching the current page's url to
the hyperlinks contained in the menu. In most cases this will work just fine. However, when the current page is not
reflected as a link in the menu, then the current marker will not be able to find a match and no marker is applied.
Fortunately, the TabBar Magic includes the Advanced Current Marker system to allow you to handle these
exceptions so that even pages that do not appear in the menu can be "Current Marked" to a specified menu link or
menu section.
Note: Use the Advanced Current Marker ONLY when the page does NOT appear as a link within the menu system. In other words, the Advanced
Current Marker is designed to handle the exceptions that go beyond the capabilities of the built-in current marking feature.
The Advanced Current Marker system is designed to be 100% Dreamweaver Template friendly. It can be
applied to any template or template-based page. The system will detect the page type and process accordingly.

Opening the Advanced Current Marker

To open the interface:
-Choose Commands > Studio VII > TabBar Magic by PVII > Advanced Current Marker...
Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no TabBar Magic html markup on the page.

The Advanced Current Marker user interface will open.
The interface allows you to manage each of four options. The radio button to the left of each option determines
which option is currently active. The default setting is always the first option:
This option tells the system to use the built-in default current marking with no special advanced marking and is the
default setting on every TabBar Magic page. There is no need to set this on any page - the option is provided solely as
a means to revert to the default on a page that is using one of the other 3 Advanced Current Marker options.

To activate the Advanced Current Marking feature you simply click the radio button next to the option you wish to
use:
• Using the Text Link Option

• Using the Url Match Option
• Using the Folder/Text Option
• Removing Advanced Marker Options
Modifying the Advanced Current Marker

The system also includes the ability to Modify the parameters of a page that already has one of the Advanced Current
marker options applied.
On a page that already contains an Advanced Current Marker -
The interface will open in Modify mode.
Note: When the Advanced Current Marker interface is in Modify mode, a Remove button appears in the column of command buttons on the right
edge of the interface window.

In this example, the interface opens with the Link Text option selected. The system will detect which option is
being used on the page and set the interface accordingly.

PVII TabBar Magic - Link Text Marking Option
Overview
The Link Text option allows you to select the text of any one of the existing links in the TabBar Magic system as the
"target" for the current marker. When the page loads the system will look for this text in the menu markup. If a
match is found it will apply the current marker style class, p7TBMmark, to the menu link and to all its parent
menu section The system will also automatically set the corresponding root menu item to the "down" state, the
p7TBMdown style class.
This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is
designed to address current marking only for those pages that are not represented in the menu. If the page does have
a corresponding link in the menu then that link will be used by the default current marker instead.


The interface has four options from which to choose. The radio button to the left of each option determines which
option is currently active. The default setting is always the first option.
Select the Current Marker Option
-Click on the second radio button to select the Link Text option.

Select the Link Text

The Link Text option includes a drop down listing of all of the links in the menu.
For this example, let's assume that you want to highlight the root menu link that contains "Section 2" as its text.
-Select Link 2.1 from the drop down list.
This tells the system to look for the item in the menu that contains Link 2.1 as its text. When it finds the link it will
apply the current marker style class to this link and its parent, if any.
Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.
-You can preview and test the menu now.
Note: to preview this feature, you will need to save your page and open it directly in the browser. Dreamweaver's Preview in Browser feature will
not work because it uses special temporary files.

URL Match Option
Overview
The URL Match option allows you to select the link value (the href) of any one of the existing links in the TabBar
Magic system as the "target" for the current marker. When the page loads, the system will look for this link value in
the menu markup. If a match is found it will apply the current marker style class, p7TBMmark, to the menu link
and to all its parent menu section The system will also automatically set the corresponding root menu item to the
"down" state, the p7TBMdown style class.
The simplest and most direct method for Advanced Current Marking is to use the Text Option. However, there may
be occasions where you have duplicate text values in the menu. Text values like "Overview" and "Introduction" are
likely to appear more than once in the menu. In these cases, you can use the URL match option to target a specific
link for current marking.
This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is
designed to address current marking only for those pages that are not represented in the menu. If the page does have
a corresponding link in the menu then that link will be used by the default current marker instead.


-Click on the third radio button to select the URL Match option.

Select the URL to Match

The URL Match option includes a drop down listing of the link value (href) of the all of the links in the menu.
For this example, let's assume that you have a page that pertains to a "Products " section, but this page is not
represented as an item in the menu. Your products section is represented in the menu with a link (href) of
"product_list.htm".
-Select products_list.htm in the listing.
This tells the system to look for the link value (href) in the menu that contains products_list.htm. When it finds
the link it will apply the current marker style class to this link and its parent, if any.
Finished

Folder: Text Match Option
Overview
The Folder: Text Match option is designed to allow you to handle large numbers of current marker exceptions and is
typically used as a global option applied to every page. Use this option when you have a large number of pages that
are not represented in the menu.
This option allows you to specify a series of folder names and link text values that the system will use for
determining the current marker link in the menu. For example, you can specify that any page which contains
"support" in its url will be matched to the link text "Information". This is referred to as a Folder Name :: Link
Text pair.
You can specify as many of these Folder Name :: Link Text pairs as you like. The system will test each pair until it
finds a match. If a match is found it will apply the current marker style class, p7TBMmark, to the menu link and to
all its parent menu section The system will also automatically set the corresponding root menu item to the "down"
state, the p7TBMdown style class to provide the "you are here trail" in the menu. You can use this system to
automatically handle current marking for all of your site's pages without having to edit any of them individually.
This Advanced Current Marker option is designed to address current marking only for those pages that are not
represented in the menu. If the page does have a corresponding link in the menu, then that link will be used by the
default current marker instead.



-Click on the fourth radio button to select the Folder Name :: Link Text option.
The interface allows you to add as many Folder Name :: Link Text pairs as you like. The first pair is always pre-
defined and ready for editing.
Define the Folder Name :: Link Text Pairs
This example will work with a menu system that resembles the structure of the menu on projectseven.com. There is
a single Extensions List link in the menu, but there are quite a few pages (close to one hundred) that are related to
"Extensions" - and stored in a folder named "extensions". Naturally, all of these pages do not appear in the menu. A
Folder Name :: Link Text rule can be defined to apply the current marker to the "Extensions List " link for any
page that contains "extensions" in the page's url.
Specify the Folder Name
The folder name is case sensitive and should match the actual folder name as used in your site.
-Enter the folder name, extensions, into the If Url contains this Folder Name box.
Specify the Link Text
The Mark this Link Text list is an alphabetized listing of all of the links in the menu.

-Select the Extensions List link text.
The interface now reflects your changes. The first Folder Name :: Link Text pair is defined.
The system will apply the current marker to the Extensions List menu item whenever the page contains the
extensions folder in its url.
Adding another Folder Name :: Link Text Pair

The site contains many pages that relate to the "Products" section but are not represented as links in the menu. To
handle these pages you can add another Folder Name :: Link Text pair.
-Click the Add button. A new Folder Name :: Link Text line item is created in the interface. The values are preset to
default values, ready for editing.

-Enter the folder name, products, into the If Url contains this Folder Name box.
-Select the Products link text in the Mark this Link Text drop down.
The interface now reflects your changes. Two Folder Name :: Link Text pairs are defined.
Using a Compound Folder Name

The site also contains sub-folders in the "products" area. You can define a compound folder name to allow a set of
pages to current mark a more specific link.
-Click the Add button.
A new Folder Name :: Link Text line item is created in the interface.
-Enter the folder name, products/design_packs, into the If Url contains this Folder Name box.
This will instruct the system to apply the current mark to the Design Packs menu item whenever the page contains
products/design_packs in its url.
Ordering the Defined Pairs

The system will apply the current mark to the first match it finds. It will search in the same order as the pairs are
listed in the interface. In this case, it will always find the products match before it finds the compound
products/design_packs match - since the page url contains the word products and the products pair is listed
before the products/design_packs pair.
-With the products/design_packs pair selected, click the Up button.
The system moves the selected item up one line. Now the search for the compound folder name will be made before
the search for the products folder name.
You can move any selected line Up or Down. Each time the button is clicked the selected item will move one line.
Deleting a Defined Pair

Although this is not performed in this example, you can delete an existing defined Folder Name :: Link Text pair at
any time. Select the Folder Name :: Link Text pair you wish to delete and simply click the Delete button.
Finished

Removing Advanced Marker Options
Overview
The Advanced Current Marker system includes a handy Remove utility that allows you to quickly remove an existing
Advanced Current Marker from any page.

If the system detects an Advanced Current Marker on your page, it will open in Modify mode - in which case, a
Remove button will be present below the OK button.

The interface will populate with the Current marker options that are currently applied to the page.
Remove the Advanced Current Marker

-Click the Remove button.
The system will completely remove the Advanced Current Marker settings from your page.

PVII TabBar Magic - Image Naming Convention
Overview
The TabBar Magic system is designed to automatically handle all of the required image actions; preloading,
swapping and maintaining down state. This automation requires that you follow the image file name convention.
The file names of your button images can be anything you like. However, you must follow a naming convention for
the "over" and "down" images. For example, if you name your default button image mybutton.gif, then the image
you want to appear when users mouse over it would be: mybutton_f2.gif and the image you would want to
designate the down-state would be named: mybutton_f3.gif.
Note: The TabBar Magic menu system automatically handles the appropriate preloading and swap actions based on the Image Swap option you
select in the User Interface.
TabBar Magic default naming convention:

• Default image: mybutton.gif
• Rollover image: mybutton_f2.gif

• Down state image: mybutton_f3.gif
The default naming convention is designed to work with the default Fireworks naming convention for the over and
down images. This naming convention is also user-definable to allow synching with your image editor's capabilities
or your own requirements. The basic image name must be the same for all three button images, but the appendage
you use to differentiate the rollover and down images can be any thing you like. To change the image naming
convention you will need to make a small change in the TabBar Magic JavaScript file.

Changing the image naming convention

1. Open the p7tbmenu.js file located in the p7tbm folder.
2. Locate the P7_initTBM() function, the first few lines will look like this:
function P7_initTBM(){
//define over and down image extensions
var Iv = "_f2";
var Id = "_f3"
3. The third and fourth lines declare what the script will use as the naming convention. Simply replace the text "_f2"
with the naming convention you want to use for the over image, then replace the text "_f3" with the naming
convention you want to use for the down-state image. In our example, we are changing the convention to use _over
and _down...so our edited code should look like this:
function P7_initTBM(){
//define over and down image extensions
var Iv = "_over";
var Id = "_down"
4. Save the file. Now the TabBar Magic system will use this revised naming convention to locate the over and down
state images. The image file names, using this customized naming convention, would look like:
• Default image: mybutton.gif
• Rollover image: mybutton_over.gif

• Down state image: mybutton_down.gif
As you can see, any naming convention will work, as long as you modify the two lines in the menu JavaScript code.

Using PVII TabBar Magic in a Dreamweaver Template
Overview
Dreamweaver Templates are a popular way to manage small and medium-sized web sites. A template carries your
complete page layout. One of the most powerful features of templates is the ability to update multiple pages at once.
How Templates Work

Templates work locally. When you make changes to the locked (un-editable) regions in your Template,
Dreamweaver updates the local copy of each page that is connected to that Template. To see those changes on the
internet you must then upload all the pages to your remote server.
TabBar Magic is designed to be fully compatible with Dreamweaver Templates.
The system will recognize that a template is being used and adjust accordingly. This means that you can add a
TabBar Magic menu to any site that is already using Dreamweaver Templates without needing adjustments,
workarounds, or manual coding.
If you are new to Dreamweaver Templates and would like to learn more about using them be sure to review the excellent template tutorials at
Dreamweaver MX Templates.com.

Adding a TabBar Magic menu to a Template

-Open your Dreamweaver Template file (or create a new Template).
-Select the insertion point for the menu. This should be in a Locked (un-editable) Region, which ensures that
the menu will propagate to all pages that are based on the template.
-Insert your menu by clicking the TabBar Magic icon in the Common category of the Insert Toolbar to open the
interface.
The TabBar Magic interface will open.
-Select your menu options and modify the menu items as desired.
-Click the OK button to add the new menu to your template.
-Save the template.
Dreamweaver will present an Update Template Files dialog.
-Click the Update button to allow Dreamweaver to update all pages that are based on this template.
The TabBar Magic system has now been added to every page that is based on the template.
Modifying a Menu system in a DW Template

You can Modify the menu at any time. The Modify system has been designed to work seamlessly when the menu is in
a Dreamweaver Template. There are no special considerations required.
-Open the Dreamweaver Template (.dwt) page that contains the TabBar Magic system.
-Click the TabBar Magic icon in the Common category of the Insert Toolbar to open the Modify interface.
-Make your modifications.
-Click the OK button to save the menu changes to your template page.
-Save the template.
Dreamweaver will again present an Update Template Files dialog.
-Click the Update button to allow Dreamweaver to update all pages that are based on this template.

Using TabBar Magic in an Editable Region
In addition to working seamlessly in a locked region, the TabBar Magic system is also designed to allow insertion
and modification on a template-based (child) page. This allows you to add the menu to a page that is template-based
and contains only editable regions. The system will recognize that the page is based on a template and will adapt
accordingly. The menu will be added to the selected editable region and the TBM CSS and JavaScript files will be
linked in an editable region in the document's <head>. No workarounds are required.

Tbmguide

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tbmguide

Enviado por

Direitos autorais:

Formatos disponíveis

PVII Tab Bar Magic Page 1 of 85

Tab Bar Magic by PVII

©2005 Project Seven Development Page 1 of 85

Tab Bar Magic by PVII ............................................................................................................................ 1

©2005 Project Seven Development Page 2 of 85

Managing the Menu List................................................................................................................. 45

©2005 Project Seven Development Page 3 of 85

The major sections in this guide are:

• Before you begin

• Menu style switching

• Editing menu colors

• Backing up and restoring style sheets

• CSS rule-by-rule analysis of the "Grunge Style"

• Appendix I: Extension help

©2005 Project Seven Development Page 4 of 85

1. BEFORE YOU BEGIN

Backup your product file

Move your Tab Bar Magic files to a Dreamweaver site

©2005 Project Seven Development Page 5 of 85

Install the Tab Bar Magic extension

Follow the onscreen prompts and dialogs.

When the installation has completed, close the Extension Manager.

Restart Dreamweaver to make the extension available.

©2005 Project Seven Development Page 6 of 85

2. CREATING YOUR FIRST MENU

Open the included workpage document

©2005 Project Seven Development Page 7 of 85

Insert a basic menu

©2005 Project Seven Development Page 8 of 85

The Tab Bar Magic UI will open.

©2005 Project Seven Development Page 9 of 85

The menu is automatically inserted where your cursor was:

©2005 Project Seven Development Page 10 of 85

Set the current page link

©2005 Project Seven Development Page 11 of 85

Choose Edit - Preferences.

Select the Preview in Browser category.

Make sure the Preview using temporary file box is unchecked.

Save your page.

©2005 Project Seven Development Page 12 of 85

Press F12 to Preview.

©2005 Project Seven Development Page 13 of 85

Center the content and menu tables

Set the W (width) value to 750 pixels.

Now's a good time to Save your page.

©2005 Project Seven Development Page 14 of 85

4. MENU STYLE SWITCHING

Switching the Menu Style

Open the Menu Style list and select 02-Tomato.

©2005 Project Seven Development Page 15 of 85

Save and Preview:

©2005 Project Seven Development Page 16 of 85

5. EDITING MENU COLORS

Setting CSS preferences

©2005 Project Seven Development Page 17 of 85

Changing the top-level menu item colors

Switch to the Background Category.

©2005 Project Seven Development Page 18 of 85

The top-level menu items are now orange.

©2005 Project Seven Development Page 19 of 85

Changing the menubar color

The menubar is now a matching orange.

©2005 Project Seven Development Page 20 of 85

Changing the top-level hover color