Grow your CSS skills. Land your dream job.

Menu with drop down based on Video #84 Chris McGarry

  • # August 17, 2011 at 1:44 pm

    After watching the video that Chris made about his friends website, I decided to start playing around with HTML5. I’ve got a menu setup inside the footer of my test site and I want to add dropdown effect to it but have it going upwards. I was hoping someone might be able to help me with this. I would really like to get it working with wordpress if possible.

    # August 17, 2011 at 2:00 pm

    Here’s a code example for you:

    .your-class {
    -moz-box-shadow: 0px -2px 5px #ffffff; /* FF3.5 - 3.6 */
    -webkit-box-shadow: 0px -2px 5px #ffffff; /* Saf3.0+, Chrome */
    box-shadow: 0px -2px 5px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
    }

    The negative number (-2px) means the it will shift upwards.

    # August 17, 2011 at 2:13 pm

    @TheDoc,

    I guess I was very clear on what I was trying to do. I have your typical menu.



    Instead of the sub-menu dropping below the list item like it usually does, I would like it to go above the menu.

    # August 17, 2011 at 2:32 pm

    Aaahhh, sorry, my mistake! I read ‘dropdown’ as ‘dropshadow’.

    This is a really quick example, but hopefully can set you on the right path: http://jsfiddle.net/XM7Rx/

    # August 17, 2011 at 2:39 pm

    @TheDoc,
    You are awesome. Thanks so much.

    # August 17, 2011 at 8:31 pm

    @TheDoc,

    Would you happen to be any good with WordPress. I’m still fairly new to the new Menu section of it and I really want to implement the code snippet you gave me.

    # August 17, 2011 at 10:14 pm

    I would! Do you have a link to the site that you’re working on?

    # August 17, 2011 at 10:27 pm

    It’s on my local machine. I setup a local server in my house and trying to get to work b4 I try to make my live site.

    # August 17, 2011 at 11:39 pm

    No problem. Create a jsfiddle with just the footer and the related CSS.

    # August 18, 2011 at 12:20 am

    http://jsfiddle.net/rjvC5/

    I would like the content to show up just like a normal dropdown and not be horizontal. Also, I have an arrow that I would like to appear above the initial menu list when hovered over and there are sub pages.

    # August 18, 2011 at 1:31 am

    Sorry, not the code in your theme file, but the code that actually renders on the website!

    # August 19, 2011 at 6:58 pm

    http://jsfiddle.net/rjvC5/2/ – Sorry it hasn’t taken 2 days to get back to you. Been a little busy. Let me know if you need anything else.

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

You must be logged in to reply to this topic.

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