I’ve done a lot of Googling and looking around at what’s out there – seems that CSS-based dropdown menus are SEO-friendly since they use <UL> and <LI> elements, etc.
But here’s the problem – the site I’m designing requires that the menu bar be quite complex – either a series of JPEGs, or a solid JPEG bar across the top of the screen to be the main menu. Any drop-down menu has to start from THAT, not its own “generated” menu bar. It also has to be SEO friendly, so a completely Javascript (or Flash) solution is out.
I’ve seen some nice gradients, designs, etc for these generated menus, but that’s not what my client is looking for. I realize that code-generated menus are much more customizable, etc.
The dropdown menu itself doesn’t seem to be a problem – I’ve seen them with nice gradients, backgrounds, etc. so once I get past this one hurdle (integrating a solid JPEG with a CSS-based horizontal drop down menu), I should be good to go.
It’s like I need transparent text that happens to overlap a background displayed in a layer behind it – but I know that won’t work. Backgrounds can be transparent, but text can’t be. I could use an imagemap, but how would that integrate with a CSS dropdown menu?
Okay, sounds like were headed in the right direction then. Just so you can see what the sprite looks like on that second link I gave you can view it here. http://www.css-lab.com/test/mossay/sprite.png
If you view the page source on those links you should be able to see how the html/css work together. Sprites just involve a lot of math getting the BG positions to work out correctly.
I’ve got to sign off now but hang in there and we will do our best to walk you through it.
That link you gave is exactly the kind of thing I’m looking for.
They also want each button to look different for the “hover” state – which happens to be the same graphic only with yellow text. (The fonts are anti-aliased and nonstandard, so there is good reason to use graphic files)
However if you also want a drop down added to each link and then each link in the dropdown to have an image then it is going to get very difficult to manage as you will need a class on every item to identify it and then you will also need normal and hover states of the image. If you have 10 items on each dropdown and ten links across then you will need 200 images.
I don’t think that’s feasible and IE will certainly struggle to display a dropdown menu with such a large image overhead.
There would be no problem in doing the top level as an image and then have the dropdown links as normal text.
As far as the badges are concerned they could be separate background images on a span which is nested in the list-items. You would want to absolute position them to the top left of the parent list-item. They would layer above the anchors but it should not cause any major problems with the links since they are small.
I would not include keep them into the sprite image for the sake of maintenance. After all, they would not be new links a year from now.
You’ve lost me at the start - why do you need your menu bar to be a series of images? And why do you think that it can’t be achieved with nested <ul>s?
(That’s not meant in an antagonistic way, genuinely asking to try to figure out why the usual methods might not work)
Can you give an example of a menu too complicated for HTML+CSS? This sounds like you are almost saying you need a flash menu… but this is 2010 not 2000.
For example, what if the site has a complex background in the header, and the menu tabs need to match the header?
What is a complex background?
Or what if the site uses non-standard fonts that aren’t available on most PCs? You then have to resort to graphical images for your menu.
non-standard fonts may mean hard to read, which may mean needing to zoom. Which could be ugly…
CSS drop-down menus are a dime a dozen, and horizontal image-based menus with javascript enhancement are a dime a dozen. But both of them together? Seems to be rarer than hen’s teeth.
but what about a different graphic for each menu item? I suppose it could be done with a different class for each item? I guess I was hoping to find something in that direction on the 'Net, but I haven’t found anything close. I just seems a bit daunting to program something so complicated in CSS, since I’ve never done so.
It will take a while to get the attachment approved so some questions can’t be answered just yet.
But yes, you are on the right track with using classes or IDs to target specific list items in your UL. In fact that is how sprites work. The reason for sprites is to reduce the http requests and have the hover states preloaded so there is no delay to cause flickering. Background positions will reposition the images on :hover since they are set as BG images.
It’s true that many beautiful menu designs can be generated with pure HTML/CSS, but sometimes one’s boss (or client) wants something too complicated for that.
For example, what if the site has a complex background in the header, and the menu tabs need to match the header? Or what if the site uses non-standard fonts that aren’t available on most PCs? You then have to resort to graphical images for your menu.
You pretty much need a large graphic with an imagemap, or a series of graphics, one for each tab. But what if THIS kind of menu also needs to be a drop-down?
CSS drop-down menus are a dime a dozen, and horizontal image-based menus with javascript enhancement are a dime a dozen. But both of them together? Seems to be rarer than hen’s teeth.
The menus don’t need to have sprite backgrounds; a simple color that matches the theme is fine.
However, I don’t see how I could do this without images. The font needs to be exact; this is a book publisher and they have lots of fonts they are accustomed to using. They are very professional and would like their site to look the same on every PC – rather than having the menu text line up differently/cause problems because this or that PC doesn’t have a given font.
They want those “New” badges over certain items. I don’t see how that would fit into a typical HTML-generated menu.
I guess I’ve never pushed CSS to its limits; in fact, I’ve been using CSS for all too short of a time. I’m a very experienced programmer, but new to CSS. It’s a long story. Anyhow, that’s why I’m seeking advice here. Is CSS capable of just about everything regular HTML can do?
For example, I know CSS can do some background-repeats and whatnot and use textures for things like backgrounds, menu items, etc. but what about a different graphic for each menu item? I suppose it could be done with a different class for each item? I guess I was hoping to find something in that direction on the 'Net, but I haven’t found anything close. I just seems a bit daunting to program something so complicated in CSS, since I’ve never done so.
I just don’t understand fully what the limitations of CSS are. I know you can “onmouseover” a given graphic, which could trigger a CSS class…
Hmm, it sounds like you are wanting to use sprite images in your dropdowns too.
Do you know how to use sprite images while having the live text hidden under the image? They can be rather complex just for the main list items, things would get really complicated if you tried to use sprites on the dropdowns. It could be done but the css would be massive.
