SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS 'Only' Drop Down Menus... need one now :)

    Looking for the best CSS only drop down to implement on my site... I have been reading reading and reading... need some expert advice.

    Thank you!

  2. #2
    Chive On FFCus's Avatar
    Join Date
    Feb 2006
    Location
    Connecticut
    Posts
    542
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should be a good start.

    Happy reading!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi sdc. Welcome to SitePoint.

    As FFCus said, there's a lot available on the web, but here is a link to a very reliable and well-formed example:

    Horizontal Drop Down Menus

    Just grab the source code and style to suit. There is a tiny bit of JS for the sake of IE6, which can't handle a pure CSS dropdown.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    There's a technique I've been switching over to lately.
    Overflow:hidden menu demo

    With it's own scripting instead of relying on a .htc file:
    Overflow:hidden menu demo with scripting assist for keyboard

    Though I'm also still using the absolute positioning method -- my advice is learn as many different techniques as you can, then figure out which is best for you... Just keep in mind the more code it requires the worse a technique it probably is.

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,771
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    I like this one:

    stu nicholls dot com | menu - Professional dropdown #2

    And this one:

    Horizontally Centered Drop-Down Menus with Pure CSS

    I also like this Javascript-assisted drop-down menu on Sitepoint:

    The Right Way to Make a Dropdown Menu SitePoint

    I do not like the way that javascript was written or how the menu is inoperable without Javascript. I'm in the process of re-doing it to suit my needs. I want it to be a CSS-only menu if Javascript is disabled, but have a Javascript delay and keyboard navigation if enabled.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The only real js free css only dropdown is Timos here. It's a great example of what can be down with a bit of lateral thinking but you need to understand it fully to customise it as one small mistake can break it.

    It's benefit is that it is automatically keyboard friendly and works in ie6 and under without the need for javascript.

    Downside is that it is complicated to understand and really needs fixed heights for the list items.

  7. #7
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a very slick, simple to use and efficient CSS drop menu here:

    http://nekkidblogger.com/2011/ultra-...dblogger-menu/

    Best,
    Peter

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jf_ishere View Post
    There is a very slick, simple to use and efficient CSS drop menu here:

    Best,
    Peter
    That's the second time you've posted that same link in successive posts in old threads and looks like self promotion which is not allowed. I'll let it stay for now but if I see the same link again in other posts then I will have to assume that all are spam.


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
  •