Learn Web Design at Digital Family

How do you create a navigation bar with drop-down menus and submenus

July 8th, 2008 · No Comments

Dear Janine,

A few weeks back you were kind enough to take the time to respond to a few questions regarding Dreamweaver, so I thought I would try again with another couple of questions. I’ve been pulling my hair out “all” weekend trying to create similar elements to a website my client likes (www.touchtunes.com). I can’t seem to figure out how to do them with CSS.

I would like to create a navigation bar with drop-down submenus similar to what they have (without using AP divs). Does this look like something that was created in Flash? I copied the code from the page and opened it in Dreamweaver. It looks like it was done in Dreamweaver, but most of the format seems to be from external style sheets.

On a linked page from that same site, I would like to create similar rollover links. In the past I’ve done this by creating an initial image and rollover image in Photoshop, but I’m trying to do these by using “unordered lists.” I can change the text color easily enough, as you showed in the Total Training videos, but I can’t seem to figure out how to change the background color like they’ve done.

I certainly don’t want to take too much of your time. If either of these questions are covered in the advanced Total Training videos, please let me know. I learned quite a bit with your Essentials discs.

If there are any keywords or topics in the Dreamweaver manual that you could suggest, that would be great too. Thank you so much for your time. Any direction would be greatly appreciated.

Chris

Hi Chris,

You can create a drop-down menu like the one at Touchtunes by using the Spry menu features in Dreamweaver. You could also create something like this in Flash, but most sites that have menus like these use JavaScript, which is what Dreamweaver uses when you use the Spry menu. You’ll find this feature covered at the end of my Advanced Dreamweaver CS4 training video (www.DigitalFamily.com/videos) and you’ll find a free written tutorial on how to add drop-down menus with spry in the Dreamweaver section.

As for changing the background color when you set up links with a UL tag, add a Background category setting (using the New CSS Rules dialog) to your a:link and a:hover styles and you should be able to control the background color in your rollover.

All my best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Tags: CSS · Dreamweaver CS3 · Flash · Links

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.