Using images for top-level links in PMM
Pop Menu Magic is the state-of-the-art in quality menu building tools for Dreamweaver. Its efficient use of CSS, standards-compliant markup, accessibility features, and lean scripting, is an extraordinary benefit over the default popup menu tools that come with Dreamweaver and Fireworks (including Fireworks 8). There might be times, however, when your design goals call for using images for the top-level links. This tutorial will show you how. You'll learn how images can be managed by Pop Menu Magic to produce an engaging navbar without any additional scripts or behaviors.
Note: This tutorial is for Pop Menu Magic users. Although you can use the techniques described for any CSS navbar, You will need Pop Menu Magic to complete all the steps as written.
Overview: the technique
The concept is simple. We'll assign CSS background images for the root-level links in a Pop Menu Magic menu. The images will contain both the default and hover states - stacked vertically. We'll use CSS to position the background images to reveal the appropriate state. The images look like this:
Consider the two instances of the word information as separate buttons - each being 36 pixels high and 121 pixels wide . By setting the height of the link tag to 36px, and its width to 121px, we can leverage the default position for a CSS background image, which is top, so that only the top "button" is visible within the link tag box. We can then use the hover class to explicitly set the background position to bottom so that only the red button shows on hover. Since we are using background images, the actual link text is on the page - available to search engines and assistive readers. We will simply position the text offscreen so that only the background image is visible.
Download the support files and starter page
To assist you in following the lessons, we've prepared a zip archive that contains the images, style sheets, and starter page you'll need to complete this tutorial. Download the support files archive and unzip into a new folder in the root of your Dreamweaver defined web site. Make sure you place the unzipped files inside a folder of a properly defined Dreamweaver web site before you proceed.
About the tutorial images
The wood grain was scanned from a photograph of genuine white oak. The logo font is Broadway, which comes on most Microsoft Office CDs. The menu font is Aldebra, which is a pixel font available at the minfonts web site. An editable Fireworks PNG is included in the download archive.
Open the starter page
Open starterpage.htm - it's in the root of the support files archive you unzipped. The starter page is set up with a logo, page background and a centered container ready to accept your menu. The menu container is a CSS-positioned DIV assigned the ID navcontainer. It is set to 750-pixels wide and has been given a CSS background image that complements the top-level "buttons".
Note: PMM works in tables, too. As you learn the technique and deploy it on your own sites, you can use tables as easily as you can positioned DIVs.
Insert a Pop Menu Magic Menu
Insert a PMM menu inside the navcontainer DIV. We'll perform this task in code view to ensure that Dreamweaver fully understands where our insertion point (cursor) is.
- In code view of starterpage.htm, insert your cursor on the blank line inside the navcontainer DIV.
- Click the PMM icon in the Common category of your Insert Bar or choose Insert - Studio VII - Pop Menu Magic by PVII.
- In the PMM window, change the link text for the 4 top-level items from "Section 1, Section 2, Section 3, and Section 4" to Information, Products, Services, and Contact Us.
- Change Menu Type to Horizontal.
- Leave all other options unchanged and Click OK to create the menu.
The top-level menu items will look unstyled. That's because they are patiently waiting for some background images, which will be assigned in our next task.
Assigning IDs to the top-level menu items
We'll need to assign IDs to the <a> tags that surround each of the top-level menu items. The IDs relate to rules in the supplied p7pmh0.css style sheet that is attached to the starter page.
-In code view, locate the first top-level menu item: Information. It looks like this:
<li><a href="#">Information</a></li>
- Place your cursor to the right of the code href="#" and press your spacebar once.
- Add the ID for the first button by typing id="b1".
Your menu item code should now look like this:
<li><a href="#" id="b1">Information</a></li>
- Now locate the other three top-level menu items and assign them IDs b2, b3, and b4 - respectively.
Page check
Switch to design view and your top-level images should be there - just as in this example.
Note: IDs can be assigned in Design View if you have Dreamweaver 8. To do so, insert your cursor in the middle of one of the top-level text links. Then right-click its <a> tag on your Tag Selector bar and choose the appropriate ID from a list. Repeat for all 4 text links. The Tag Selector bar runs along the bottom border of your Design View window, just above your Property Inspector.
How the IDs work
There are 5 CSS rules involved. The first one sets common properties for all of the "buttons" and the remaining 4 set a specific width and background image for the individual "button" that each relates to.
The #b1, #b2, #b3, #b4 selector (a single rule referencing multiple IDs)
This multiple selector represents the IDs we will be assigning to each of the 4 top-level links. It contains all of the properties common to each top-level link. We set the height equal to the height of one of the "button sections" of the background image and we set the background-image to not repeat. Text-indent is set to -3000px (minus 3000px), which moves the top-level link text offscreen. The rule looks like this:
#b1, #b2, #b3, #b4 {
height: 36px!important;
background-repeat: no-repeat;
text-indent: -3000px;
}
The individual #b1 | #b2 | #b3 | #b4 selectors (4 separate rules)
Now we need a separate rule for each of the 4 top-level links. These rules will set unique background images and widths for each of the top-level links. The rules look like this:
#b1 {
width: 121px;
background-image: url(../pmm_rootimages/p7r_nb1.gif);
}
#b2 {
width: 100px;
background-image: url(../pmm_rootimages/p7r_nb2.gif);
}
#b3 {
width: 95px;
background-image: url(../pmm_rootimages/p7r_nb3.gif);
}
#b4 {
width: 107px;
background-image: url(../pmm_rootimages/p7r_nb4.gif);
}
About the included menu style sheet
The CSS file (p7pmh0.css) is fully commented, describing all of the changes made. Open it up at your leisure and read through it. A good exercise would be to print out a copy of a default p7pmh0.css file along with the one adapted for this tutorial, and compare the rules.
IE5.x Windows workarounds
IE5.x for Windows has a few issues that need to be worked around. To isolate these workarounds from other browsers we used a feature built into MSIE Windows browsers called Conditional Comments. This is what the code looks like on the included starter page:
<!--[if IE 5]>
<style>
body {text-align: center;}
#wrapper {text-align: left;}
#b1, #b2, #b3, #b4 {text-indent: 0; color: #F4B486!important; font-size: 1px;}
</style>
<![endif]-->
The opening comment contains a version reference. In this case, the reference is if IE 5. This reference targets all IE5.x browsers from version 5.0-5.99. Inside the comments is a normal style sheet.
IE5.x Windows does not support centering with auto left and right margins. By setting text alignment on the body to center, IE5.x will center all elements inside the body - as well as all text inside those elements, which we counteract by setting text alignment to left on the wrapper. IE5.x does not support negative text indents correctly. If we do not set text-indent to zero on the #b1, #b2, #b3, #b4 selector, it will read the negative indent in the main menu style sheet and position the entire link, background image included, offscreen. But setting text-indent to zero places the link text in view over our background images. To fix that, we set the link color to match the wood texture in our background and font-size to the smallest size that IE5 will support: 1px.
Firefox Workaround
When clicking on a root link, or tabbing into it, Firefox will draw a focus rectangle around the first root item all the way back to the left edge of the window. To prevent this, we set overflow on the root <a> element to hidden. We then set overflow on the submenu <a> elements to visible to prevent IE5 Windows from truncating the submenu links. Finally, we need to hide these rules from IE5 Mac to prevent it from hiding the entire menu!
/* hide from IE mac \*/
#p7PMnav a {overflow: hidden;}
#p7PMnav ul a {overflow: visible;}
/* end hiding from IE5 mac */
We hide the rule from IE5 Mac by using a CSS comment syntax that fools that browser into believing that the comment is unclosed. After we write the rule, we'll give IE5 an antidote so it can continue reading the CSS file by using a properly formatted comment.
That's a wrap
That's it. We've created a cool PMM menu with top-level images without giving up functionality and without introducing additional scripts. Save your work and start thinking of creative ways to deploy top-level images on your sites.