SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there dropdown menu code for image based nav?

    I've done lots of searching and experimenting with existing code and I'm surprised that I can't find dropdown menu code in JavaScript/CSS that will work on all (new) browsers which can be implemented using images - not text.

    I have tried Suckerfish but when I replace the text with images, it works in Firefox but I get nothing in IE7, not even visible on initial rollover.

    Charles

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Charles,

    It'll take some extra code (there's no doubt about that), but how do you want the images displayed? As actual images using the IMG element, or as background images served via a SPAN placed over the text? Also, do you want the images to just be on the first level, or every level of the menu?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    There are a wide range of drop down menus at http://www.cssplay.co.uk/menus/

    For example, here's a professional drop-down using images.
    http://www.cssplay.co.uk/menus/image_drop.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The cssplay code looks good - but is heavily copyrighted - I'd like to use something (like Sitepoint code) that is royalty free if possible. My designer has designed the text of the dropdown using MAC fonts - he wants me to preserve the font so I need an image ONLY dropdown menu - this one would be the closest I can find except that I don't need the additional text boxes popping up over each image since the image will have the text in it. http://www.cssplay.co.uk/menus/image_dropdown.html

    Can't believe this is so difficult to find.

    Thanks
    Charles

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It's so difficult to find because it's a bad idea. Not only does it become impossible to navigate once images are turned off, it's also an accessibility nightmare.

    The copyright notice isn't that heavy at all. He's wanting to be notified that you wish to use it, and have credit to him retained in the source.
    And he's asking that you don't distribute it with other other menus and such like, he wants to be the source of it himself.

    That's not very onerous at all to me.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    I can see the accessibility being an issue for some people - but really, how many people have images turned off? What kind of surfing experience is that?

    I believe that he asks for a link to his cssplay site as part of the copyright notice. That's what I object to.

    Charles

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charles_i View Post
    I believe that he asks for a link to his cssplay site as part of the copyright notice. That's what I object to.
    Try reading a bit closer and you will see that he asks for the link only for personal websites.

    Send him an email if you're concerned, provide a run-down of your situation and I think that you will find that he is very reasonable.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by charles_i View Post
    I can see the accessibility being an issue for some people - but really, how many people have images turned off? What kind of surfing experience is that?
    It's not just people that you want to care about. There are a number of systems out there that don't process images, google being just one of them.

    Also, I am curently browsing with images turned off. Why? Because the training institution that I'm at right now charges a per megabyte rate for usage.

    Some people don't have images, some are on dial-up, some can't see properly, while others have no javascript.

    You have no control over how the visitor experiences your Web page. You can only try to guide them to their most usable experience.

    As the saying goes:

    You cannot prevent the birds of sorrow from flying over your head, but you can prevent them from building nests in your hair.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I ran this by my designer and his response was:

    "We don't care about the people on a budget training course or who have dial-up. It's a pr firm looking for companies with money for pr and who have high-bandwidth business users."

    Sometimes you don't need to build a full space ship that will go to the moon when all you want to do is send up a rocket.

    Thanks
    Charles


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
  •