PMM Style Pack

Imagine the possibilities

Project Seven Development
 2

POP MENU MAGIC STYLES PACK

Express yourself with additional elegant menu styles for Pop Menu Magic.

The Pop Menu Magic Styles Pack adds 6 new vertical and 6 new horizontal style choices to your PMM
menu system.

We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen PVI

© 2007 Project Seven Development

 Pop Menu Magic Styles Pack 3

CONTENTS

Pop Menu Magic Styles Pack .....................................................................................................................................2

Install the extension ..................................................................................................................................................... 4

Work in a Defined Dreamweaver Web Site .......................................................................................................... 5

Product Overview ........................................................................................................................................................ 5

Included Fireworks Editable Images .......................................................................................................................... 6

pmm_exstyles.png ............................................................................................................................................... 6

pmmTabs_cobalt ................................................................................................................................................. 6

pmmTabs_mocha ................................................................................................................................................ 6

Editing Images .......................................................................................................................................................... 7

Updating existing Menus to use the new script ........................................................................................................ 9

Questions and Answers ............................................................................................................................................. 10

My horizontal menu seems a bit wider than the rest of my page or my page has spawned a horizonal
scrollbar. What do I do? ........................................................................................................................................ 10

How do I make space between my horizontal menu and the content below? ............................................ 11

How do I adjust the width of my horizontal menu? ............................................................................................ 13

How do I adjust the width of my vertical menu?................................................................................................ 13

THe text in my vertical menu is tiny. How do I make it bigger? ......................................................................... 13

Why is the sub-menu animation in my horizontal scalable tabs menu (Cobalt or Mocha) "jerky" in IE6 or
IE7? .......................................................................................................................................................................... 14

Why is there no animation at all in my sub-menus? ........................................................................................... 14

Can I change colors or other style attributes? ................................................................................................... 14

Why are the Scalable Tab Hover effects different in IE6 and IE5?.................................................................... 14

My vertical menu is too wide or drops to the bottom of the page? ................................................................ 14

Support and Contact info......................................................................................................................................... 15

Newsgroup forum communities ........................................................................................................................... 15

RSS News Feeds ...................................................................................................................................................... 16

Before you Contact us .......................................................................................................................................... 16

Snail mail ............................................................................................................................................................. 16

© 2007 Project Seven Development

 Install the extension 4

INSTALL THE EXTENSION

Look for the extension installer file P7_PMM_SPack_103.mxp in the root of the zip archive you downloaded.
Double-click the file to install the extension. Dreamweaver's Extension Manager will open and you will be
prompted to complete the installation. Restart Dreamweaver once the installation is complete.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file association
issue. To remedy the problem locate the installer file from inside a Finder window and double-click it.

The next time you access the PMM (Pop Menu Magic) interface in either Create or Modify mode, you'll find
the following 6 new style choices at the bottom of your styles list:

Note: If you have one or more PMM Page Packs installed, your list will show those additional styles, too.

© 2007 Project Seven Development

 Product Overview 5

WORK IN A DEFINED DREAMWEAVER WEB SITE

Before you begin, make sure you are working inside a defined Dreamweaver web site - on a page that is
saved within that site. This is necessary so that Dreamweaver knows how to link required assets to your
page. If you are new to Dreamweaver or Pop Menu Magic and need to learn how to define a web site,
please see this tutorial: Defining a Dreamweaver Web Site.

PRODUCT OVERVIEW

Your new PMM styles expand your design choices within the PMM system. While many people will use the
styles as they come, we do include editable Fireworks images for your convenience should you want to
customize the root level links. Each of the horizontal styles incorporates variable width root menu items. That
is, each top-level link adapts to the width of the text inside. Additionally, the Cobalt and Mocha horizontal
styles utilize a special technique to achieve scalable rounded corners on the root links.

© 2007 Project Seven Development

 Included Fireworks Editable Images 6

INCLUDED FIREWORKS EDITABLE IMAGES

When you unzip your product download, you will find a fireworks folder inside. This folder contains editable
versions of the background images used in each of the new style themes. Make at least one copy of this
folder and store it in a folder within your defined site. Also make a backup copy and store it on backup
media.

The fireworks folder contains 3 editable image documents:

PMM_EXSTYLES.PNG

This file contains the editable background images for the vertical and horizontal Carbon, Goranji,
Bluestone, and Greystone menu styles.

PMMTABS_COBALT

This file contains the editable background images for the vertical and horizontal Cobalt menu style.

PMMTABS_MOCHA

This file contains the editable background images for the vertical and horizontal Mocha menu style.

© 2007 Project Seven Development

 Included Fireworks Editable Images 7

EDITING IMAGES

When you insert a menu on your page, the system creates a p7pm folder inside the folder that contains the
page. Inside this folder is an img folder, which contains all the images used by your menu. The system
generates only the images needed for the menu style themes you have used on any pages within the
parent folder.

If you'd like to customize any of the background images, open the relevant Fireworks file, make your
changes, then export the images back to the p7pm/img folder associated with your page to overwrite the
original images.

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to the p7pm/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

© 2007 Project Seven Development

 Included Fireworks Editable Images 8

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only, and Include areas without slices are all unchecked.

Current page only is checked

Click Save

You should get an overwrite warning.

Click OK

Note: Please make sure you keep your images and your image slices the same size. To see your slices, click the eyeball
icon next to the Web Layer entry in your Fireworks Layers panel.

© 2007 Project Seven Development

 Updating existing Menus to use the new script 9

UPDATING EXISTING MENUS TO USE THE NEW SCRIPT

This Style Pack includes an updated version of the Pop Menu Magic script. This update adds support for the
scalable tabs used in the horizontal versions of the Cobalt and Mocha styles.

If you are working on a new menu, in a new folder, or a folder that never contained a Pop Menu Magic
menu, no action is necessary. If, however, you are working on a menu that was created prior to installing
this product, or have created a new menu inside a folder that contains an existing p7pm directory, you'll
need to update the PMM script.

1. Locate the p7pm folder inside your current page's folder.

2. Locate the p7popmenu.js file inside the folder and delete it.
3. Use the Pop Menu Magic interface to either create a new menu or modify an existing one. When
you click OK, the PMM system will generate a new and updated script file inside your p7pm folder.

© 2007 Project Seven Development

 Questions and Answers 10

QUESTIONS AND ANSWERS

The following questions and answers should prove helpful as you use your new PMM styles.

MY HORIZON TAL M EN U S EEMS A B IT WIDER TH AN THE RE ST OF MY P AG E OR M Y P AGE H AS SP AWNED A

HORIZON AL SCROLLB AR . WH AT DO I DO?

The horizontal menu styles are designed to look "finished" when inserted on a blank page and are styled with borders around the
outer box. To fit the menu inside an existing layout you should remove the left and/or right borders assigned to the root element.
In your PMM style sheet, locate the #p7PMnav rule. It should be the very first one in the CSS file. For example, this is the default
#p7PMnav rule for the Bluestone horizontal style:

p7PMnav {
margin: 0;
padding: 0px;
background-repeat: repeat-x;
width: 100%;
float: left;
background-color: #4993C4;
border-top: 1px solid #A7CCE0;
border-right: 1px solid #3E89BB;
border-bottom: 1px solid #3E89BB;
border-left: 1px solid #A7CCE0;
background-image: url(img/pmbluestone_root.jpg);
}

Remove the left and right border declarations so it looks like this:

p7PMnav {
margin: 0;
padding: 0px;
background-repeat: repeat-x;
width: 100%;
float: left;
background-color: #4993C4;
border-top: 1px solid #A7CCE0;
border-bottom: 1px solid #3E89BB;
background-image: url(img/pmbluestone_root.jpg);
}

© 2007 Project Seven Development

 Questions and Answers 11

HO W DO I M AKE SP AC E BE TWEE N M Y HORIZONTAL M ENU AND THE CONTENT BELO W?

A good way to do this is to wrap your menu inside a containing DIV, set the DIV to clear all floated
elements above it, and then assign a bottom margin to the container.

Go into Code View and locate your menu markup, which will look something like this:

<ul id="p7PMnav">
<li><a href="#">Section 1</a></li>
<li><a href="#" class="p7PMtrg">Section 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#" class="p7PMtrg">Link 2.2</a>
<ul>
<li><a href="#">Link 2.2.1</a></li>
<li><a href="#">Link 2.2.2</a></li>
<li><a href="#">Link 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#" class="p7PMtrg">Section 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
</ul>
</li>
<li><a href="#">Section 4</a></li>
<!--[if lte IE 6]><style>
#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}
#p7PMnav ul li{float:left;clear:both;width:100%}
</style><![endif]-->
<!--[if IE 6]><style>
#p7PMnav ul li{clear:none;}
</style><![endif]-->
<!--[if IE 7]><style>#p7PMnav a{zoom:100%;}
#p7PMnav ul li{float:left;clear:both;width:100%;}
</style><![endif]-->
</ul>

© 2007 Project Seven Development

 Questions and Answers 12

Wrap the entire block inside a DIV tag and assign the DIV an id of menuwrapper:

<div id="menuwrapper">
<ul id="p7PMnav">
<li><a href="#">Section 1</a></li>
<li><a href="#" class="p7PMtrg">Section 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#" class="p7PMtrg">Link 2.2</a>
<ul>
<li><a href="#">Link 2.2.1</a></li>
<li><a href="#">Link 2.2.2</a></li>
<li><a href="#">Link 2.2.3</a></li>
</ul>
</li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#" class="p7PMtrg">Section 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
</ul>
</li>
<li><a href="#">Section 4</a></li>
<!--[if lte IE 6]><style>
#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}
#p7PMnav ul li{float:left;clear:both;width:100%}
</style><![endif]-->
<!--[if IE 6]><style>
#p7PMnav ul li{clear:none;}
</style><![endif]-->
<!--[if IE 7]><style>#p7PMnav a{zoom:100%;}
#p7PMnav ul li{float:left;clear:both;width:100%;}
</style><![endif]-->
</ul>
</div>

Place a BR between the menu's closing </ul> tag and the wrapper's closing </div> tag. Give the BR a class
of clearmenu:

..........
</style><![endif]-->
</ul>
<br class="clearmenu />
</div>

Now open your menu's CSS file and create a new line after the last rule and type in the following new rules:

.clearmenu {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
display: block;
}

#menuwrapper {
margin-bottom: 20px;
}

You can adjust the margin value to suit your design. You can also add borders to this element to replace
any or all of the borders in the #p7PMnav rule.

© 2007 Project Seven Development

 Questions and Answers 13

HO W DO I AD J US T THE WID TH OF MY HORIZONT AL M E NU?

The horizontal menu styles in your new pack are all set to be 100% wide in the #p7PMnav rule. It's best to
neither change this setting nor assign a width to any of the other menu CSS rules. This ensures that your
menu will conform to the width of the container it is placed inside of. If your menu is not in a container, you
should create one, as described in the previous answer, and assign a width to the container.

HO W DO I AD J US T THE WID TH OF MY VER TIC AL M ENU?

Locate these 2 rules near the bottom of your menu CSS file:

/* Top level menu width */

#p7PMnav {
width: 200px;
}
/* 2nd and subsequent Submenu widths */
#p7PMnav ul {
width: 200px;
}

Adjust the widths to suit.

THE TEX T IN M Y VERTIC AL M EN U IS TIN Y . HO W DO I M AKE IT BIGGER ?

We set a font-size property on the root #p7PMnav CSS rule of 0.8em. Locate the #p7PMnav rule in your
style sheet and set it to the size you want. For example, this is the #p7PMnav rule from the Carbon style
sheet:

#p7PMnav {
margin: 0;
padding:0;
background-image: url(img/pmcarbon_vroot.jpg);
background-repeat: repeat-y;
font-size: 0.8em;
border-top: 1px solid #4D4D4D;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #4D4D4D;
}

Change the font-size value from 0.8em to suit. If you are setting font-size on a parent element, you may
delete this property altogether.

Note: There is no font-size set by default for the horizontal styles.

© 2007 Project Seven Development

 Questions and Answers 14

WHY I S THE S UB -M EN U AN IM ATION IN M Y HORIZONTAL S C AL ABLE T AB S M ENU (COB ALT OR M OCH A) "JER KY " IN
IE6 OR IE7?

This is caused by a bug in IE that is triggered when you change the unit of measure for the sub-menu width
from the default em unit to pixels. Locate the following rule in your menu style sheet:

/*width MUST be in EMs*/

#p7PMnav ul, #p7PMnav ul li {
width: 15em;
}

Adjust the width as necessary, but make sure the unit of measure is set to em.

WHY I S THERE N O AN IM ATION AT AL L IN M Y S UB-M ENUS ?

This would happen if you have set a font-size directly on the link rules (#p7PMnav a or #p7PMnav ul a) in
your style sheet using a pixel unit of measure. You can keep a font-size property in those rules but must
change it from pixels (px) to ems (em). Pixels can be used so long as you set the font-size on the parent
element (either the menu wrapper or the root #p7PMnav rule).

C AN I CH AN GE COLORS OR OTHER S TY LE ATTR I B UTES?

Please refer to the main Pop Menu Magic User Guide (online) or visit the PMM Tweaks and Knowledge Base
sections of the PVII web site.

WHY ARE THE S C AL AB LE T AB HOVER EF F ECTS DI F F ERENT IN IE6 AND IE5?

A bug in those browsers will cause severe flickering if we allowed the root background image to change
when hovering over the sub-menu links so we only allow the text color to change on hover in older versions
of IE. There is currently no fix available for this bug.

MY VERTIC AL M EN U IS T OO WIDE OR DROPS TO THE BOTTOM OF THE P AGE?

The default widths set for the vertical root menus and the sub-menus are controlled by these rules, in which
you can change the width values to suit:

/* Top level menu width */

#p7PMnav {
width: 200px;
}
/* 2nd and subsequent Submenu widths */
#p7PMnav ul {
width: 200px;
}

Note: Also be aware that Dreamweaver versions prior to CS3 have many CSS rendering bugs in Design View. If your
vertical menu drops to the bottom of the page it could be that the width of the root is correct, but the sub-menus are
too wide for Dreamweaver to correctly render. Your choices are to live with the DW rendering bug, to make your sub-
menus narrower, or to upgrade to a modern version of Dreamweaver.

© 2007 Project Seven Development

 Support and Contact info 15

SUPPORT AND CONTACT INFO

PVII quality does not end with your purchase - it continues with the best customer support in the business.

NEWSGROUP FORUM COMMUNITIES

The Project VII Newsgroup community is available 24 hours a day. Choose from the following newsgroups:

1. The PVII Webdev Newsgroup (post support issues here)

2. The PVII Dreamweaver Newsgroup (general Dreamweaver discussions)
3. The PVII Fireworks Newsgroup (general Fireworks discussions)
4. The PVII CSS Newsgroup (general CSS discussions)

Use a news reader program such as Outlook Express, Windows Mail, Thunderbird, or Entourage to set up a
new news account pointing to our news server:

forums.projectseven.com

If you are not sure how to do this, the following links will help you:

 Setting up a new newsgroup account in Outlook Express (or Windows Vista Mail)
 Setting up a new newsgroup account in Mozilla Thunderbird
 Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation to
learn how to add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is,
you will not find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our
news server as a new account.

© 2007 Project Seven Development

 Support and Contact info 16

RSS NEWS FEEDS

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure
how to subscribe, please check this page:

PVII RSS Info

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 correspondence.

E-Mail: support@projectseven.com

Phones: 330-650-3675 | 336-374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

SNAIL MAIL

Project Seven Development

339 Cristi Lane
Dobson, NC 27017

© 2007 Project Seven Development