Grow your CSS skills. Land your dream job.

Trying to design a dropdown menu – Help to enchance it.

  • # June 11, 2012 at 2:58 pm

    Hi!
    You might have seen these two:
    http://dribbble.com/shots/181720-Menu
    http://dribbble.com/shots/181436-Dropdown-menu-navigation-UI-UX-with-CSS3
    But most likely, you haven’t.

    But I would LOVE to get some help in how to this this, PURELY IN CSS.
    Right now, all I can come up with to make the dropdown menu is to make a background-image that has a transparent start… Let me show you:
    http://wilhelmwanecek.zxq.net/Demo1/

    If I just offset the menu and add an arrow the hover state disappears before I can reach the menu, as seen here:
    http://wilhelmwanecek.zxq.net/Demo2/

    (Sorry for the slow web host, It was the best free one i could find. :P)

    The problem with this one (the first example) is:
    1. Images. They take up loading time and they’re kind of unprofessional :)
    2. I can’t apply a box-shadow.
    3. I WANT TO LEARN! :)

    Feel free too look at all the code and I’d gladly receive feedback, I’m only 15 and still learning HTML/CSS, PHP and jQuery :)

    //Will

    # June 12, 2012 at 10:55 am

    Hey Will,

    I’m new to all this too and I am not sure if this is the right solution, but could you use this?

    http://cherne.net/brian/resources/jquery.hoverIntent.html

    I think you can set an ‘onMouseOut’ time that would give you a second or so to move down to the menu?

    Like I said, not sure if its a solution, but have a look

    Matt

    # June 12, 2012 at 11:32 am

    @mtedwards He wants a pure HTML & CSS solution so no JS.

    Without a decent link (I can’t get the ones provided to work), it’ll be tough to assist. I wouldn’t want to have to go to the hassle of recreating the whole thing.

    Here’s an idea…..make a FIddle so we can play.

    # June 12, 2012 at 11:34 am

    Oops … yup missed that.

    # June 12, 2012 at 12:02 pm

    If you are just looking for a CSS drop down menu, here are a couple I have done in the past to get you started…hope this helps

    CSS Menu #1

    CSS Menu #2

    # June 12, 2012 at 12:14 pm

    @JPC776 He’s looking to make the menu like the images he posted but your links might be useful to him. Presumably he has some CSS already.

    Of course, the fact that there is an apparent gap between the top level list item and any drop down causes a problem as you can’t mouse off the top level without the sub level disappearing.

    I think you could probably do something with first child &/or pseudo elements but I’m not going to code the whole thing up. If the OP has some code that mostly works but needs tweaking, I know that there would be plenty of people who would like to give it a shot.

    # June 12, 2012 at 4:03 pm

    Hi!
    Thanks for all the replies, I made a Fiddle so that you can experiment… :)

    @JPC776 Thanks, but I already know how to make a dropdown menu, I only want to know how to do this specific one as seen in the example… :)

    @mtedwards Yeah, the onMouseOut thing sounds good, thanks for your reply. But still, I would like to find out a way to do this Purley in css and html :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".