SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Drop-down Menu

  1. #1
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-down Menu

    Are there any tutorials out there or samples of a simple CCS Dropdown Menu?

    I recently built a simple menu bar which looks like a series of (horizontal) rectangles. When you hover over one, it turns color. And each rectangle is like a "tab" that leads to a section in my website.

    So now I would like to expand, and have a submenu for each main menu item. For example, I have an item "SHIRTS" and I would like a vertical dropdown that displays:

    Men's
    Women's
    Kids'

    I want to steer clear of JavaScript since I don't know it, and away from CSS3 since I need to be backwards compatible to IE6.

    No fancy effects. Just a simple solid color, rectangular drop-down menu like you would find in most applications you use on your computer.



    TomTees

  2. #2
    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)
    Are there any tutorials out there or samples of a simple CCS Dropdown Menu?
    Hi,
    Here is a couple of very simple examples using fixed widths that show the basic concept.

    (view page source)
    Simple Dropdown #1
    Simple Dropdown #2

    since I need to be backwards compatible to IE6.
    For IE6 support you will need to use the sfhover script since IE6 only supports :hover on anchors.

    A typical suckerfish dropdown uses li:hover to trigger the dropdown and that is where IE6 needs help. The script only needs to be feed to IE6.

    See the article at html dog for the basic setup
    http://htmldog.com/articles/suckerfish/dropdowns/


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
  •