treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Help me make my menu cool!

  • 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!
  • 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?
  • #nav li a:hover, #nav li a:focus {
    position: relative;
    top: -10px; }
  • That is what I thought too, but it doesn't do the trick.
  • Does this work for you?
    http://codepen.io/pen/108/1

    If not please explain which trick you were after.
  • 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.
  • Glad to help where I can. Does this work for you or not?
    http://codepen.io/pen/108/1

  • 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?