Hi, I recently had a website redesign, and our web company ended up using javascrtipt for our global navigation elements, like rollovers and "onclick" image swap. I decided that I wanted to get rid of all the javascript, and just use CSS for everything. So far, I have been able to code the rollovers, and they work great, but now I'm running into a problem. If you go here: expresscomputersystems.com/xcart/home.php When you click on a page either in the horizontal nav or vertical nav, you'll notice that the image is swapped from yellow to black in the horizontal navigation, and grey to yellow in the left navigation. All of that is done by javascript. What I want, is to figure out a way to do this with CSS. Is that even possible. I thought about maybe using the :focus pseudo-class, but i know that IE doesn't support it. Does anyone have any ideas?
Ah yes, I notice the initial slowness as each image is only loaded for each button after I hover over them. Were this my page, I'd have one image for the whole top menu as well as one for the side menu. See CSS Sprites Meets Sliding Doors. Then to make the side menu react to the top menu... well, clicking something on the top menu loads a new page. With static HTML pages, it would then also load a new side menu along with everything else. I'm sure there's a way to do this with dynamically-loaded pages too, but I don't build those kind (my colleague does). Anyway, there'd likely be a class on the current li called "current." Sidemenu: <h3>Browse by Brand</h3> <ul id="sidemenu"> <li><a href="home.php?cat=256">Used Cisco Hardware</a></li> <li><a href="home.php?cat=257">Used Sun Microsystems Hardware</a></li> <li [b]class="current"[/b]><a href="home.php?cat=259">Used IBM Hardware</a></li> <li><a href="home.php?cat=260">Used HP Hardware</a></li> <li><a href="home.php?cat=261">Used NetAPP Hardware</a></li> </ul> Code (markup): Class="current" added to one which we will have hold the hover image. Much better. Now, if you want you could wrap the above in a div but I think you might be able to get away with giving the top image to the <h3> and the sides and bottom to the UL, while the li's or the <a>'s carry the images. Look at the Sprites link I gave you above. And I'll give you another example of one image per menu: http://stommepoes.nl/Menus/spritesmenu.html The image of the menu is below. This example is for when you NEED the text to also be in the image... the image is held in empty <span>s so that when there are no images, there is still text (the text in the <a>), but sometimes people want funky fonts. What's easier if you just have that image as the background for the <a>s with not extra spans or anything, and just let the text be text. I don't see a funky special font there, so use the Arial default you had and colour the text black like you had. The disadvantages of your current menu (as you probably know because you want to get rid of it) is that it loads slow, doesn't work with my machine until I let Javascript in (meaning people without Javascript can't use it, or people behind firewalls which block some scripts, etc), and relies on images to show the text. At least there's ALT text which is better than nothing, but apparently there are screen readers who ignore alt text if there's an image to be displayed (who thought that one up??). I'm not doing the CSS for this one because I'd have to make the images myself from yours and I'm technically supposed to be working : ) But it's basically something like (vertical menu) #sidemenu { list-style: none; background: url(nameofmenubackgroundimage.gif) 0 0 no-repeat; width: whatever; padding: set some top and bottom padding if this will hold a background image); } #sidemenu li { display: block; (if you want) padding: 0 5px; (or whatever) } #sidemenu a { display: block (or you could float them and use the li or the width of the ul to keep them in line...) text-align: center; height: whatever; width: whatever; (these are equal to the height and width of the visible part of the image you need to show) background: url(linkbackgroundimage.gif) 0 0 no-repeat; } #sidemenu a:focus, #sidemenu a:hover { background-position: set two coordinates here to show the "hover" part of your image... usually one number remains at zero, the other set it px); } #sidemenu a:active { background-position: set the two coords for the "active" part of your image; } There are a few ways to do it. The coords depend on how you've made the image. You may also only want normal and hover and nothing special for active. What about the current selected menu item? #sidemenu li.current a { same settings here as you have with the :hover and :focus version... } or add them directly to your hover section: #sidemenu li.current a, #sidemenu li a:focus, #sidemenu li a:hover.... etc IE7 does. IE6 thinks "active" means "focus" so that's why if you're going to bother with :focus (which is a good idea) then add that same effect for :active and then IE6 will think it can :focus : ) This is only for anchors and not for things like submit buttons (type="image") as I found the hard way : )
Stomme poes, This is awesome! Thanks for all the help. I've already started working on getting this going, the only problem I have is one that you addressed as well. We have a dynamic site, so I can't use the "current" class. I'm still trying to figure out how to fix that issue. I'd really like to have the tab image change when our visitor is on a certain page, just so they know where they are. I'll keep trying to find something that will help. Thanks again, your input was much appreciated.
^well but you CAN use the current class, I believe. Whatever it is that decides what the side menu will be made up of (based on what people click on the top) would also dynamically add the "current" class. Since the class only needs to be addressed once in the CSS, it can be implemented numerous times... and the CSS sheet gets cached so it would load quicker... the image would also already be loaded. But I don't do scripting. I do know that you can wrangle a "current" class into generated HTML, cause I've seen it : ) *edit another way I've seen was to give the body different ID's based on which page the customer is on. Something like <body id="IBM"> or something; you could use the body's id in your HTML generator to determine which page has the current class on which li.
I do this kind of dynamic multi-level navigaton menu work all the time. You will need to write the "current" selector into your script. It gets a little tricky because "current" could be located on any level in a multi-level menu. If each level has different CSS then this is important. The benefit is once you develop the sever-side script you can can use it on any website just by changing the CSS. Here's a recent post of a sample script written for the Empressa script parser: Sample Script