PVII Pop Menu Magic

User Guide Home :

menu trigger arrows

Arrows are not assigned to the root level triggers by default. This tutorial will teach you how to add arrows to the root level trigger items in an existing Pop Menu Magic Horizontal menu set to the Frosty Blue Menu Style.

A default Frosty Blue Horizontal menu looks like this:

The default Frosty Blue menu

Assign an arrow background image to the root level triggers

Arrows are assigned via CSS - as background images. By default, horizontal menus have arrows on sub-menu triggers only. This is the relevant CSS rule:

#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon

This rule is targeting elements inside the sub-menus that are assigned either of two classes: p7PMtrg or p7PMon. To make the rule target elements not only inside the sub-menus, but also at the root level, we simply need to remove the two instances of ul in the rule's name. The rule's name needs to be changed so that it reads:

#p7PMnav .p7PMtrg, #p7PMnav .p7PMon

Dreamweaver does not provide a means to edit the names of existing CSS rules, so you'll need to open up the CSS file and change it yourself.

Edit the Horizontal Frosty Blue CSS file

-Open your Files panel (F8) and locate the p7pm folder in the same folder that contains the page you are currently working on.

-Expand the p7pm folder, then locate p7pmh6.css.

-Double-click p7pmh6.css to open the CSS file in Code View.

-Locate the #p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon rule.

-Delete both instances of ul in the rule name, so that it looks like this:

#p7PMnav .p7PMtrg, #p7PMnav .p7PMon

-Save and close the CSS file.

Your root level triggers now have arrows:

Arrows are now displayed at the root level

Next: Home