SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member manishk's Avatar
    Join Date
    Dec 2007
    Location
    New Delhi, India
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Digg Style DropDown Menu

    Hi,

    Does anyone has the code (or link to an article) for making a menu similar to Digg?
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Most drop downs are based on the suckerfish menus which use hover as a trigger rather than being clicked. They can be converted and I think you will fine examples here that should suit:

    http://tutorials.alsacreations.com/deroulant/
    http://tutorials.alsacreations.com/d...u-vertical.htm

    I have a very old (and tired) bare-bones demo here:

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

    However the javascript needs more error checking to compare existing classes before it changes them

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I just found another old demo of mine that is horizontal and may be of more use


    http://www.pmob.co.uk/temp/dropdown-...tal-expand.htm

  4. #4
    SitePoint Zealot lana77's Avatar
    Join Date
    Jan 2005
    Location
    philadelphia
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's funny, because, I was looking for this just a few days ago. Based on a few tutorials I created css drop-down menu here - http://lanafurs.com/news/html/
    with transparent second level sub-menus.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I created css drop-down menu here
    I believe the poster was looking for a menu that expanded when clicked and not hovered (Well that's how the Digg menu works anyway).

    There are many hover menus about and the suckerfish link I posted above is probably the best place to find those if that's what the poster wanted.

    BTW, your "Fur News and Blog" drop down goes under the foreground content so check your z-indexes

  6. #6
    SitePoint Member manishk's Avatar
    Join Date
    Dec 2007
    Location
    New Delhi, India
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    I just found another old demo of mine that is horizontal and may be of more use


    http://www.pmob.co.uk/temp/dropdown-...tal-expand.htm
    Hey Paul O'B, thanks this will indeed serve as a starting point for me. Thank you.

    Also, is it possible to keep the clicked tab "active"? I mean the color changes when you roll-out after clicking & opening the menu.

  7. #7
    SitePoint Member manishk's Avatar
    Join Date
    Dec 2007
    Location
    New Delhi, India
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind, got the "active" state with javascript. thanks.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Never mind, got the "active" state with javascript. thanks.
    Glad you fixed it

    On the current page you could have done that using the class that was added when clicked (.onx in my example). You would then need to overwrite it on the nested list.

    I've updated the above changes into another example.

    http://www.pmob.co.uk/temp/dropdown-...al-expand2.htm


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
  •