Horizontal Subnav with CSS & JQuery Questions~!

Hi all,
I found this post here and I have the same question… it was marked ‘closed’ with no answer… can anyone help? Thanks!

I’m working on designing a subnav bar for a website and I implemented a horizontal subnav, which I got the code for here: http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/

I have two questions, the more important one, how would i make an “active class” so that the subnav would be open when one of the main links is active?

example: click on link 1 => go to link 1 page and sublink 1, 2, 3 are visible.

If you could help me out i would be very grateful.

Also, in the link provided above, there is a section where there is a script which contains the explanation for which Jquery actions are being performed.
How would i go about implementing it to my site? just add the code to the header section? or make an external js file?
the script:

<script type=“text/javascript”>
$(document).ready(function() {

$(“ul#topnav li”).hover(function() { //Hover over event on list item
$(this).css({ ‘background’ : ‘#1376c9 url(topnav_active.gif) repeat-x’}); //Add background color and image on hovered list item
$(this).find(“span”).show(); //Show the subnav
} , function() { //on hover out…
$(this).css({ ‘background’ : ‘none’}); //Ditch the background
$(this).find(“span”).hide(); //Hide the subnav
});

});
</script>

Cheers and thanks in advance

For the first question, what I normally do (assuming you are not using a CMS) is to place a class on the body tag for each section, and also classes on each top level list item in the menu.

So, for example, in the About section, at the top of each About page I would have this on the body tag:

<body [COLOR="#FF0000"]class="about"[/COLOR]>

and on the list item for the About section

<li [COLOR="#FF0000"]class="about"[/COLOR]><a href="/about/">About</a></li>

Then, in the style sheet, I’ve have a rule like this:

.about li.about a { ... current styles here ... }

That works very nicely.

PS: ‘current’ styles is my version of what you call ‘active’. Because active has another meaning in CSS (when you are actually clicking on something) it’s better to use a word like ‘current’ for what you are trying to achieve to avoid confusion. That is, you are ‘currently’ on this page.

Thank you for the prompt reply, I appreciate it!

So in essence this means that I would have to have these parts as editable regions on each page. Kind of a pain, I would think, if I’ve got 32 pages across the site and ever need to update the navbar.

What I’ve noticed now is that, after implementing, it takes approx 10 seconds to load the page initially (in IE) and then the ‘waiting’ spins for about 5-10 seconds more… a little too long in my book.

I’ll see if I can email the coder, I wonder if that’s because I’m ‘getting’ the script from Google? You can see it in the header here… Example site.

No, not really. You should always have your nav bar stored in one place and fed to all pages via PHP includes or something similar. Using the above method, you only need one nav bar code. That’s the beauty of it. You do need a body class on each section, but that’s quick to do.

An easy alternative is to use jQuery, though of course it won’t work for anyone with JS off:

What I’ve noticed now is that, after implementing, it takes approx 10 seconds to load the page initially (in IE) and then the ‘waiting’ spins for about 5-10 seconds more… a little too long in my book.

Yes, that’s way too slow. so there must be something wrong there.

Wow, these forums are great, I’m learning so much.

Ok, it seems this PHP nav bar code is new to me, any recommendations where to read up about it for a brand newbie?

I’m just getting started in this, and in school for the past several years we’ve been using Dreamweaver CS5 with templates and the like. At least I know better when the instructor says to use image files for the nav button rollovers instead of text and css… ugh.

I didn’t know that people turn Javascript off?

Figured out the slowness, it seems that it was temporary so I think it was a server fluke.

It’s actually very simple. Here’s a simple guide to using PHP includes. It’s similar to Dreamweaver library items (or whatever they are called) but much better than using Dw. Remember, though, that these includes won’t work on your desktop version, just on the live site, unless you have a server environment set up on your computer like MAMP or WAMP.

At least I know better when the instructor says to use image files for the nav button rollovers instead of text and css… ugh.

Hm, it’s better not to use images if you can avoid them, as they tend to be less accessible.

I didn’t know that people turn Javascript off?

Yes, perhaps it’s not common, but it does happen. There are lots of developers around these forums who have it off. Although they receive some level of ridicule, there is a standard in web design (“progressive enhancement”) that says a site should be able to function adequately with JavaScript and CSS off. Just like you can eat a cake with no icing or chocolate chips, though it might taste nicer with them on.

Remember also that some users may have limited access to you site, such as those using screen readers. If the content is generated by JS, they may not be able to access it properly. And Google is your biggest blind user.