Customizing the Menu for Your Needs
This menu is fine for a four-animal zoo if you happen to own one. Chances are you don’t, so you need to adapt this menu for your own needs. Here are some tips.
Try to organize the navigational structure before coding, and get the HTML lists all squared away as in “Step Two: Build the HTML” before you build the CSS. Because Dreamweaver doesn’t display complex menus quite right, you might need to go into the code directly to make changes to the HTML list later. Alternately, you can detach the CSS in order to edit the HTML more easily, then reattach it. This is a simpler solution if you are unfamiliar with HTML. (Get familiar! It’s totally worth it.)
To detach the CSS file from your HTML file:
- In the CSS Styles panel, click on menu.css.
- Click on the trash can icon at the bottom of the CSS Styles panel.
To reattach the CSS file to your HTML file:
- In the CSS Styles panel, click on the Attach Style Sheet icon at the bottom of the CSS Styles panel.
- Click Browse to navigate to your menu.css file and click OK. Click OK again to save the change.
Incorporating the Menu into a Page
Chances are good too that you want this menu inside a page instead of by itself. Here are some loose instructions for that, if you already have a web page with an external CSS file attached to it. This code will work for a menu with any number of items up to three levels deep.
- With your cursor somewhere inside the funky menu layout in menu.html, click on
in the Tag Inspector below. This selects the entire list.
- Edit > Copy to copy the code to your computer’s clipboard.
- Open your HTML file for your web page and place your cursor where you want the menu to appear. This may take some trial and error to get exact placement if you are unfamiliar with HTML.
- Edit > Paste to paste the menu code.
- Return to menu.html. Just below the Document Tab click the small button for menu.css.
- Edit > Copy again to copy the CSS to your computer’s clipboard.
- Open your main CSS file for your web page and place your cursor at the bottom of the existing code.
- Edit > Paste to paste the CSS code for the menu.
Changing the Font or Colors
To change any individual CSS rule, you click on its name in the CSS Styles panel and click on the Edit Rule… icon at the bottom of the panel.
To change the font, click on ul.dropdown a:link and click the Edit Rule icon. Change the Font-family in the Type category and click OK. Do the same for ul.dropdown a:visited and ul.dropdown a:hover. You can edit the text color here too.
To change the background color, edit ul.dropdown: click on the color swatch for background-color in the Background category, and select a new color.
To change the background color for the hover state, edit ul.dropdown li:hover in a similar manner.
Adding a Background Image
You may notice that my own menu above behaves like the one we just designed, but it has a buttony look which is supplied by this background image (you may steal it).
Save your background image somewhere in your Web site folder. Here’s where the background image needs to be placed in our CSS code:
- ul.dropdown ul
- ul.dropdown li:hover
- ul.dropdown ul li
In each case, do the following:
- Click the Edit Rule icon as instructed above.
- In the Background category, click on the Browse icon next to Background-image and navigate to your background image.
- Click OK to select the image, and click OK again to save and exit the CSS Rule Definition.
Good luck! If you have any questions or feedback, I’d love to hear from you in the comments below.