TUTORIAL: CSS-Only Dropdown Menu

Discussion in 'Web Design' started by ronaldroe, Apr 11, 2011.

to remove all ads.
Thread Status:
Not open for further replies.
  1. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I wanted a quick dropdown for my website navigation that wasn't scripted, and zero flash. After reading about it, I drilled the code down to only the basics so I could build from that.

    So, without further ado, the code below is the CSS-only dropdown menu styled just enough to make the concept look like something you'd expect to use:

    HTML
    CSS
    Hope some of you find this useful.

    EDIT: Added :active pseudo-class to make it touch-friendly.

    2nd EDIT: Deleted link to my way old site, and combined the :hover and :active pseudo-classes in one declaration to comply with the "DRY" concept.
     
    Last edited: Jun 8, 2013
    website7 likes this.
  2. leroy30

    leroy30 New Member

    Messages:
    485
    Hi ronaldroe,

    Any chance you could elaborate on "EDIT: Added :active pseudo-class to make it touch-friendly" for us? I've never heard of this one before..
     
  3. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Basically, I took a shot it the dark and copied the bit of code that makes the menu appear on hover, and changed :hover to :active. Turns out it works. On my website, when you tap "portfolio", at least on my iPhone, it opens the dropdown. Once I did that, I added it here so it would work for other people too. If you look at the last 2 blocks of the CSS, they're nearly identical, except the pseudo-class.
     
  4. Frank

    Frank New Member

    Messages:
    117
    If I click Portfolio on Firefox or Chrome on Android, the submenu opens, but at the same time the page works.html. Which is not surprising, because that is the content of the href of Portfolio.

    For a cross-browser two-level menu that works on all platforms and devices, see this tutorial.
     
    Last edited: Apr 21, 2013
  5. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    I actually changed that page a while back so tapping "portfolio" would just go straight to works.html. I found it more usable, but in the end, it doesn't matter, since that's the old version of my site.

    In fact, I'll just go ahead and remove the link to avoid further confusion.
     
  6. aspirin

    aspirin New Member

    Messages:
    2
    Hello everyone I need a dropdown menu for this site : http://frivjugos.com

    Any sugeschens, what to do if you or anyone can do it :)
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    This thread is a suggestion...
     
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,639
    I would like to know who
    is?? :)
     
  9. harrymarry

    harrymarry New Member

    Messages:
    1
    Hi Chrishirst
    I also want to know who is??
     
  10. website7

    website7 New Member

    Messages:
    5
    Nice explanation, easy to understand, thank you ronaldroe
     
Thread Status:
Not open for further replies.

Share This Page