Sub menu problems

[Robyn]

I was trying to find ways to enhance my menu bar on my website, and found this cool looking menu layout.

So after applying all the html and css, I've come across a very bad problem. The submenu won't appear. I've tried everything. It just won't appear. I haven't added the js files yet because there is no point if there is no submenu to have the js files modify.

So here's my files I've been using. Basing them off the website above, can someone tell me where I messed up?

[Jordan]

You need the JQuery functions to make it work. The submenu is there, it's just hidden with the CSS. If you disable Javascript while viewing the demo you'll notice it won't work.

display: none; /*--Hidden for those with js turned off--*/

[Robyn]

But javascript is enabled. And I don't even have the JQuery file executed.

[Jordan]

I'm saying you need the JQuery file.

[Robyn]

Isn't the JS file in the zip that JQuery file?

[Jordan]

You don't have the Javascript in the files you linked to above and you also said this: "I haven't added the js files yet because there is no point if there is no submenu to have the js files modify."

All you need to do is follow the instructions on the site to add the Javascript to your page.

[Robyn]

What confuses me is that JS file just modifies the behavior of the sub menu. It doesn't actually create the sub menu. Thus, with the JS file not being executed in the html, the sub menu should still appear... right?

[Bob]

Mar 7, 2010 7:27:09 GMT -8 Robyn said:

What confuses me is that JS file just modifies the behavior of the sub menu. It doesn't actually create the sub menu. Thus, with the JS file not being executed in the html, the sub menu should still appear... right?

No.

Look at the CSS file, Robert.

ul#topnav li .sub {

        ... omitted
	display: none; /*--Hidden for those with js turned off--*/

}

Specifically what I have bolded for you. That line right there essentially turns the sub menu off. It's there but it's being hidden by the CSS. The JS (and the JQuery library in this case) is required to dynamically change that display attributed from "none" to blank (thus viewable) and then back to "none" once the mouse moves off from the parent link.

You'll need to go back to that tutorial and follow steps 5-8 if you want to finish up what you've started.

[Robyn]

Ah, yes. I cannot believe that I didn't complete the full tutorial. It works just fine now.

Thanks.