Dynamic Top Navigation Menu

[ask4help]

Hi there,

I have been trying to look for tutorial to create a dynamic top navigation menu similar to this website: www.soccernet.com. However, I spent the whole morning searching to no avail.

I will be very grateful if someone can give me a link where I can learn how to create dynamic navigation menus using XML, CSS or Javascript.

Thank you very much.

[andreasblixt]

Hello,

When I saw your post I gave myself the challenge to make a hierarchical menu entirely in CSS with only semantic HTML at my disposal. That means I use no extra classes or elements unless they make sense to the document structure (not considering the design at all).

Here's the result: http://css.mezane.org/hierarchical-menu/

Unfortunately, not all browsers support the more advanced CSS selectors so I had to add a small snippet of JavaScript that simulates them. On the other hand, it works in all common browsers without any CSS or JavaScript targeting a particular browser.

If you want to try out the CSS-only version, it's here: http://css.mezane.org/hierarchical-menu/css.html

It's been tested to work in IE 7, Firefox and Safari 3. Unfortunately, IE 6 isn't dead enough yet to ignore it (its usage is about 60% among non-internet-savvy people).

[PeejAvery]

Soccernet using JavaScript in their menuing scheme. If you want an amazing CSS menu, check out GRC's Script-Free Pure-CSS Menuing System (http://www.grc.com/menu2/invitro.htm). DynamicDrive also has a nice section (http://www.dynamicdrive.com/dynamicindex1/indexb.html) on CSS menus.

Attached is a drop-down JavaScript menu that I developed a while back. I hope that also gives you some help.

[andreasblixt]

I'm a bit of a skeptic to CSSPlay's menus (the ones being used on the first page linked) as they use an astounding amount of hacks to make them cross-browser compatible. I guess it doesn't matter if you just copy/paste once, but it's harder to maintain and uses more bandwidth (and the HTML in the conditional comments is invalid).

[PeejAvery]

...as they use an astounding amount of hacks to make them cross-browser compatible.
That is one reason why I mentioned GRC's CSS menu. Steve Gibson is an amazing assembly programmer and set his mind to a new CSS menu. It works really well with great cross-browser compatibility.

[andreasblixt]

I wouldn't say an immense amount of hacks makes something good. Some of the hacks can be worked around using less CSS/HTML. The hacks also make the design harder to update (and one must fully understand how they work to be able to update it).

I don't know who Steve Gibson is, but the code for the menu on that page is basically a copy/paste from Stu Nicholls' homepage (www.cssplay.co.uk).

[PeejAvery]

Yeah, he mentions that...

But inspired by these many demos, after nearly two months of development we arrived at the final result, which is running the menu at the top of this page. We do wish to acknowledge several closely related efforts that provided substantial guidance and encouragement along the way:


Stu Nichols excellent "CSS Play" site
Stu Nichols drop down menu demos
Eric Meyers pop-up tips
A List Apart — Horizontal Dropdowns
Position Is Everything
CSS Menu Tutorial

[ask4help]

Hi all,

I have been away for a while and am really suprised to see that many people responded to my post.

I really appreciate all of your helps especially andreasblixt & peejAvery. Both of you provide a very good examples in making CSS drop down menu.

I have made 1 very simple drop down menu with both of your help.

Thanks.

Codeguru really helps me a lot.

[PeejAvery]

Glad we could be of help.