SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Single JPEG menu bar launches CSS-based dropdown menu?

    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?

    Any advice here would be most helpful.

    Thank you,

    Matthew

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sounds like a regular dropdown, just place an image inside the top level <li>

    The text can be there for SEO (and when image are off), just hide it with text-indent:-999px or something like that.

    Do you have an attempt?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    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)

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Matthew

  5. #5
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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.
    let's see this image...
    Ryan B | My Blog | Twitter

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Here is a sprite with text dropdown
    http://www.css-lab.com/test/mossay/test-1.html

    We need to know more about the images you are working with.

  7. #7
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've attached the graphic in question.

    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...

    Matthew
    Attached Images Attached Images

  8. #8
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.

    Here is a sprite with text dropdown
    http://www.css-lab.com/test/mossay/test-1.html

    We need to know more about the images you are working with.
    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)

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chantcd View Post
    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)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As Ray said you can do most anything you need to do with css.

    Here's a similar example to Rays but a bit more complicated and is explained herebut just shows that most things are possible.

    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.

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chantcd View Post
    Ok, I've attached the graphic in question.

    They want those "New" badges over certain items. I don't see how that would fit into a typical HTML-generated menu.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •