Pop-up menus that sorta-kinda-ALMOST work

[Thomas Veil]

Another relative newbie question, regarding installing drop-down menus on a page. (I incorrectly called them "pop-up" menus in the thread title.)

I've been tasked with remaking our city's web site. Here's the link to the prototype I've been working on.

The problem is the green nav bar in the upper middle of the page. I want to make each one of those six buttons a drop-down menu. Each button is already a separate image, and I have made drop-down menus for most of them in Fireworks, and they do seem to work.

But when I attempted to insert one into the prototype page, not only didn't it work, but it scattered my divs all over the place. Nothing I could figure out prevented this.

I did start a second page from scratch, and on this page, the drop-down menu button worked as planned -- until I attempted to add a second drop-down button. Then the divs were scattered all over the place again.

FWIW, the nav bar is a separate image made in Photoshop, as are each of the buttons (prior to import to Fireworks). I'm sure what I'm doing wrong is something simple, but I haven't found the answer yet. Any ideas?

 

[GSMiller]

Pop up menus are a bitch, I never could get them to work right. They'd work great in the generator but wouldn't when they were live on the webpage. I eventually gave up. I hope you can get it working.

The site looks good by the way!

 

[Thomas Veil]

Thanks for the compliment, I appreciate it. And thanks for the comment about drop-down menus.

Based on what you said, I went looking around the internet for info about Dreamweaver, Fireworks and drop-downs...and found plenty of people complaining about similar problems. Seems DW and FW write some sloppy code in the implementation of these menus. Sometimes it works; sometimes it doesn't.

A number of people recommended using third-party products that are specifically designed for such menus. I downloaded one on a trial basis, and sure enough, it worked very nicely on a test page I made. So I'll probably end up going that route.

 

[GSMiller]

Glad to see you could get it working, what app was it?

 

[Thomas Veil]

DHTML Menu Studio. I'm trying the version that integrates with Dreamweaver, and so far no problems. And there's other software out there that looks good as well.

 

[Thomas Veil]

Just wanted to give you an example of what I did. This is by no means the final menu, but pretty close: http://www.brunswick.oh.us/2008WEBSITE/index-3.html

 

[angelwatt]

That's looking pretty good. I like how if the drop down menu doesn't fit below it'll scroll the menu so you don't have to scroll the page.

Some comments:

• When you mouse over a sub-menu option the light blue background with the white text is hard to read.
• With images disabled (such as the blind or text browsers) the navigation is gone. This'll also likely keep search engines from crawling the site, thus making it harder for people to find the page. Not sure how much control you'll have over that though since you're using third party stuff for the menu.
• The <i> is technically deprecated for XHTML 1.0. This is easily fixed by using the <em> instead.
  
• The HTML and CSS validates. I always love seeing that.

 

[Thomas Veil]

When you mouse over a sub-menu option the light blue background with the white text is hard to read.

Yeah, I agree. I'll have to work on that -- probably by making the highlighted item background a little darker, like in the main menu bar.

I made the sub-menus semi-transparent, too (85%), and I noticed the transparency doesn't work in Safari. Also, even at 85% it's still too transparent. I think I should go for 90-92%.

 

[angelwatt]

I made the sub-menus semi-transparent, too (85%), and I noticed the transparency doesn't work in Safari. Also, even at 85% it's still too transparent. I think I should go for 90-92%.

How are you trying the transparency? Looks like it may be a gif or png file. CSS has transparency effects. You can use alpha for stands compliant browsers and opacity for IE. Some times image transparencies get messed up. You can read a small discussion of someone having problems with gif transparency at this page http://sitexperts.com/forums/viewConverse.asp?d_id=19857&Sort=0 among other pages.

So it may be something like that. You should look into the CSS method to see if it works the way you like.