SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot planewalker's Avatar
    Join Date
    Jun 2007
    Location
    Somewhere witty
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS DRop Down Menu ppost/question #23457908

    Yea, though I'm not seeing any recently, I'm sure the question of drop down navs done with CSS have come up many times relating to every aspect of them.

    With that said, I wanted to know - is there a way to manage CSS drop down menus without javascript? My guess was no, but what do I know. And along those same lines, what is the most effective way to do these using the most minimal amount of code - keeping cross browser issues in mind of course.

    We currently have a system to develop these, but it was developed some time ago (using CSS and JS). I wanted to drop this in here and see what the current process is and if I can update ours in some way.

    Thanks in advance for responses

    ---edit---

    Sorry about the typos in the subject - yikes I was in a hurry
    Last edited by planewalker; Oct 30, 2007 at 18:26.
    witty comment here...

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The suckerfish method only uses javascript to provide hover functionality in IE6, and is pure html/css for modern browsers.

    Stu Nicholls has come up with a version that uses conditional comments to embed illegally nested tables within the top links just for IE6 - very messy, but does work without javascript.

    Personally, I prefer the suckerfish one.

  3. #3
    SitePoint Zealot planewalker's Avatar
    Join Date
    Jun 2007
    Location
    Somewhere witty
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links, much appreciated
    witty comment here...

  4. #4
    SitePoint Zealot planewalker's Avatar
    Join Date
    Jun 2007
    Location
    Somewhere witty
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... after playing with it for a while, I found it has issues in IE7 (they said it just had issues in Safari, which it happens to work fine in). It also doesn't seem to be able to handle navs of multiple levels...

    Could really use some help finding a solution for this if anyone has any other ideas.

    Thanks,
    witty comment here...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The suckerfish menus work fine in IE7 with little tweaks and can handle as many levels as you want to program.

    Here's a 4 level one one that I did that's been adapted to work over selects in IE6.

    http://www.pmob.co.uk/temp/drop-down...overselect.htm

    (the javascript isn't mine)

  6. #6
    SitePoint Zealot planewalker's Avatar
    Join Date
    Jun 2007
    Location
    Somewhere witty
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't seem to work for me in IE6 - odd
    witty comment here...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Doesn't seem to work for me in IE6 - odd
    If you mean my demo then it works fine in Ie6 and ie7.

    Either you have javascript turned off or you are using the IE standalones without having added the conditional comment fixes and version fixes that are required.

  8. #8
    SitePoint Zealot planewalker's Avatar
    Join Date
    Jun 2007
    Location
    Somewhere witty
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would be my bad - I'm using some stand-alone version that apparently has issues, sorry about that - your menu is great, and I appreciate it (am playing with it now)

    ...so next question...

    ...have a vertical version by chance?
    witty comment here...

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Go to the home page of the site and then scroll down to Horizontal and vertical drop down menus based on the suckerfish menus.

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    grc.com/menu2/invitro.htm has a pure css nested dropdown menu. It is placed in public domain by Steve Gibson. It has a non semantic table hack for ie lte 6, but I like it.

  11. #11
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    grc.com/menu2/invitro.htm has a pure css nested dropdown menu. It is placed in public domain by Steve Gibson. It has a non semantic table hack for ie lte 6, but I like it.
    Looks very much like a CSS Play menu. With all those less than and greater than IE6 & 7 conditional comments, I'd hate to see what'll happen to it when a new version of IE comes out.

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen View Post
    Looks very much like a CSS Play menu. With all those less than and greater than IE6 & 7 conditional comments, I'd hate to see what'll happen to it when a new version of IE comes out.
    Agree with the similarity. Stu Nichols does a remark on that.

    The only conditions regarding gt ie6 is to close a-tags. Can't see any future problem with that.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It has a non semantic table hack for ie lte 6, but I like it.
    Yes it looks like a direct copy of Stu's menu which I dislike anyway. I think Stu's stuff is usually brilliant but I think this menu is a bit of an abomination (probably too strong a word).

    Everyone has known for years that you could make drop downs in IE by nesting anchors but of course is totally invalid. Stu's version basically just uses nested anchors but hides this fact from the validator and other browsers. It does have some refinements with nesting a table in there but the result is a mass of code that bloats the page that could otherwise have been done in a couple of lines of javascript.

    However I don't see that there will be any problems with it in future versions as only ie6 and under are using the method and the rest get normal code.

    Obviously if you want a menu that works without javascript then there are some sacrifices to be made but I would never use it myself.

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    However I don't see that there will be any problems with it in future versions as only ie6 and under are using the method and the rest get normal code.
    There's a lot of if gt IE6 CCs in there which assumes that any future versions of IE will play by the same rules as IE7 which you can't be certain of.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tyssen
    There's a lot of if gt IE6 CCs in there which assumes that any future versions of IE will play by the same rules as IE7
    I'm not sure what you are saying John but I don't think there's any danger of Conditional Comments being dropped as the IE team have always stated this and encouraged their use.

    If you are referring to the code within the comments in that example then then the gte ie6 is a hack aimed at IE6 by excluding IE6 from seeing the closing anchor. Any browsers in advance of IE6 (ans all other browers) just get the normal code and don't have any hacks. Even if conditional comments were dropped that example would still work in ie7+ because the conditional comments are treated just like comments and the browsers would get the original code which they understand.

    That's why I said the code was unlikely to cause any harm as it is basically targeting a dead browser.

  16. #16
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, sorry; didn't look closely enough at what was actually following the gte IE6 CCs.


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
  •