Grow your CSS skills. Land your dream job.

Help me make my menu cool!

  • # April 26, 2012 at 9:58 pm

    I have two things in mind that I want to do to take a simple menu just one step beyond, and possibly make it….cool.

    Demo site is up at http://dev.wedodev.com/clients/prdale/topekalasik/

    Thing 1 – I want to use jQuery to make the main navigation icons rise up on hover. I have searched around and for whatever reason have been unable to find what I am looking for and am not skilled enough to write it myself.

    Thing 2 – For the drop down menu I want to have a triangle at the top of the menu. I have built the menu with some basic CSS3 and would like to keep that. I am trying not to use a full background image so I can keep the menu a dynamic height. The end result should look like this.

    I would appreciate any help in pointing me in the right direction. Thanks!

    # April 27, 2012 at 1:45 am

    Something like this?

    http://codepen.io/pen/91/1

    # April 27, 2012 at 9:40 pm

    This is awesome, thank you! I have implemented what you did in the demo site.

    One last question…

    How do I keep the main li in the “up”, or hover state when I mouse down to the drop down menu?

    # April 28, 2012 at 12:42 pm

    #nav li a:hover, #nav li a:focus {
    position: relative;
    top: -10px; }

    # April 28, 2012 at 4:30 pm

    That is what I thought too, but it doesn’t do the trick.

    # April 28, 2012 at 5:12 pm

    Does this work for you?
    http://codepen.io/pen/108/1

    If not please explain which trick you were after.

    # April 28, 2012 at 5:47 pm

    Thanks for the continued help.

    What I want is for the main navigation tab, for example Our Process, to stay in the up/hover state when you mouse down to the drop down menu.

    # April 28, 2012 at 6:03 pm

    Glad to help where I can. Does this work for you or not?
    http://codepen.io/pen/108/1

    # April 30, 2012 at 9:31 pm

    Unfortunately it does not.

    Let me try another stab at explaining what I want…

    When you mouse over a

  • two things currently happen. 1 the menu item “moves” up and 2 the drop down menu appears. When you move your mouse down to the drop down menu the original
  • that you were hovering on goes back to a normal state, or “moves” down.

    How do I keep the main

  • stay in the hover state while I am in the drop down menu?
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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