TMM2 Image Based Menu
PVII is the leader in creative extensions for Dreamweaver.
Image-based menu
See the Finished Page| TMM2 Tweaks Main | TMM2 Home
Before you begin
This tutorial requires TMM2 version 2.1.6 or higher. If you need to update, please see the TMM2 Updates Page.
Create a new folder inside your defined Dreamweaver site and mane it TMM2-Tutorial. Unzip the archive and move its files and folders inside your new folder.
The download archive contains the following files and folders:
Fireworks folder
Contains an editable Fireworks document from which you can edit the root images. The font-styles used are Webdings and Bell Gothic Standard. Webdings comes with most Windows and some Mac systems and is required for the icons. Bell Gothic is used for the icon labels and if you do not have the font you can change it to one you have.
Images folder
Contains the working icon images that you will use in your menu
TMM2-ImageTutorial.css
The layout CSS for the included workpage. This file also contains the 3 simple CSS tweaks to the TMM2 menu CSS (described at the end of this tutorial).
workpage.htm
A nice 2-column CSS page with a sidebar ready to accept your new menu.
Build the menu
Open workpage.htm and place your cursor in the left column, to the right of the words "Menu placeholder". Backspace over the words until they are gone.
Open the TMM2 Interface and create 4 main links.
Select the first main section and click the Browse button to the right of the Image Path box. Browse to the images folder inside your TMM2-Tutorial folder and select concept.jpg.
Repeat the process to set images for the remaining 3 main links using tools.jpg, hot.jpg, and links.jpg.
Leave the Alt Text box blank for now.
For a real page you would want to set meaningful Alt text for each main link.
- Select each main link and click the Add Sub button to create a sub-menu.
- Add several links to each sub-menu by using the Add Item button..
- Enable the Toggle Sub Menus option
- Choose the Normal and Over Image Swap Option
- Select the 07-Image-Based Style Theme
- Click OK
CSS Edits
The following 3 edits to the default TMM2 Image-Based CSS were included in the TMM2-ImageTutorial.css file that is linked to the workpage:
.p7TMM07 ul a {
text-align: right !important;
outline: 0 !important;
}
The above rule sets right text alignment for menu items and turns off the focus rectangle (which we add back in a customized rule next).
.p7TMM07 ul a:focus img {
outline: 1px dotted #666 !important;
}
We set a custom focus rectangle for the root image links
.p7TMM07 ul ul ul li {
padding-left: 20px !important;
padding-right: 0 !important;
}
We set 20px of left padding and turn off right padding to indent each menu link box.
That's it!