simple vii menu worksheet

We've built you an attractive page so that you can focus on the nuts and bolts of using the AutoLayers and AutoHide extensions to make your menus pop up and hide. Here are some notes about this page:

structure

The page markup (HTML source code) contains several absolutely positioned DIVs and 2 static DIVs. Macromedia refers to absolutely positioned DIVs as Layers.

Logo

The Logo is contained inside a Layer:
<div id="logo">

To edit the logo Layer's properties, edit the following rule in the supplied CSS files:
# logo

Trigger Layers

There are three Trigger Layers. Each contains a trigger image that, when moused over, reveals a submenu. The Trigger Layers are:

1. <div id="p7trigger1">
2. <div id="p7trigger2">
3. <div id="p7trigger3">

Edit the Trigger Layer properties in the supplied CSS files. These are the CSS rules that apply to the Trigger Layers:

• #p7trigger1, #p7trigger2, #p7trigger3:
  A combined selector that deals with all properties that are common to all three Trigger Layers
• #p7trigger1:
  Relates to only those properties that are unique to the first Trigger Layer
• #p7trigger2:
  Relates to only those properties that are unique to the second Trigger Layer
• #p7trigger3:
  Relates to only those properties that are unique to the third Trigger Layer

Submenu Layers

There are three Submenu Layers - one for each of the Triggers. These are ordinary Dreamweaver Layers that contain the submenu links. The links are styled by rules within the included CSS file. These Layers are set to be invisible. To see or edit the links inside the submenu Layers, use your Layers panel to select the one you want to work with. It will remain visible until you click somewhere else on the page. The Submenu Layers are:

1. <div id="p7simonsubs1" class="p7submenus">
2. <div id="p7simonsubs2" class="p7submenus">
3. <div id="p7simonsubs3" class="p7submenus">

These are the CSS rules that apply to the Submenu Layers:

• #p7simonsubs1, #p7simonsubs2, #p7simonsubs3:
  A combined selector that deals with all properties that are common to all three Trigger Layers
• #p7simonsubs1:
  Relates to only those properties that are unique to the first Trigger Layer
• #p7simonsubs2:
  Relates to only those properties that are unique to the second Trigger Layer
• #p7simonsubs3:
  Relates to only those properties that are unique to the third Trigger Layer
• .p7submenus:
  A class assigned to each Submenu Layer. This class is used to define Descendant Selectors that style the links and paragraphs within each of the Submenu Layers (Descendant Selectors are explained in the CSS files)

Main Content DIV

The Main Content is contained inside a static DIV:
<div id="maincontent">

To edit this DIV's properties, edit the following rules in the supplied CSS files:
# maincontent
#maincontent p

Footer DIV

The Footer is contained inside a static DIV:
<div id="footer">

To edit this DIV's properties, edit the following rule in the supplied CSS files:
#footer

CSS Files

There are two style sheets supplied:

1. p7simon.css
   This is the main style sheet. It is attached to the page via the @import method to hide it from version 4 browsers.
2. p7simonv4.css
   This style sheet is dynamically written via a special PVII Javascript and is read only by version 4 browsers.

If you switch to Code View you will see a small JavaScript towards the top of the page, that starts with:

if(!document.getElementById){document.write...

Towards the end of the first line of the script, you'll see a link to the p7simonv4.css file:

href="p7simonv4.css"

If you move the CSS files to a different folder, or as you add new pages and folders to your site, make sure you adjust the path to this CSS file. It might even be more convenient to make the path site relative or absolute. For example, if you place the CSS file in a root folder called "styles", the root relative path would be: /styles/p7simonv4.css

The absolute path would be: http://yourwebsiteaddress.com/styles/p7simon.css

IE5-6 PC Display: Block Fix

To make a text link look and behave like a "button", we set its display property to block. When you mouse over such a link, its entire box is "clickable" - not just the text. IE5x and IE6 (PC) do not get this right. To fix this, we use a conditional comment, which is placed just above the closing </head> tag. It looks like this:

<!--[if gte IE 5]>
<style>
/* This rule fixes a bug in IE5-6PC allowing
the entire link box to be "clickable". */
.p7submenus a { height: 1em;}
</style>
<![endif]-->

The version vector in the opening comment tag (if gte IE5) means that the comment's content will be read by IE versions that are greater than or equal to 5. Simply setting the height of the <a> element fixes the bug.

Editing the CSS files

We recommend editing the CSS files manually, by opening each one up. The CSS files are thoroughly commented - to the extent that each is a tutorial in its own right.

Images

We've included an editable Fireworks PNG file in the event that you'd like to adapt our images for your use. You can, of course, use your own images. The most important thing you need to know is that Trigger images are optimized so that their color fills are transparent. This allows the CSS background colors assigned to the <a> tags within the Trigger Layers to "show through" - resulting in a simulated swap image without the need for a second image. The Fireworks file is called: simon2004.png and is annotated to help you.

Simple VII Menu by PVII