Question

I found a great tutorial on building a clean, responsive menu and it’s ALMOST perfect!

Please take a look at http://www.gymnasticsvillage.com/unifirst/navtest (not in IE as I haven’t added response.js yet!) and reduce your browser to the break point (480)

I haven’t got a response yet from the blog author and I KNOW this could be simple for a CSS guru…what I need help with is:

1) when you open a subnav, the down arrow graphic should be swapped with an up arrow to cue the user to collapse. I made the graphic ‘upArrow.png’ just don’t know what to do now!

2) right now the menu acts as sliding panels but I would love it more like an accordion, automatically collapsing a submenu when another is selected

I hope somebody can help…thanks so much!

If anybody wants a great tutorial, check it out!
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/

Answer 1

This is pretty straight forward i think.

This is the css you need for the up arrow. Add it at the end of the @media screen and (max-width: 480px) { section.

.nav li.hover > .parent {
    background-image: url('../images/upArrow.png');
}

Line 146 of the css file should be this so you don’t lose the arrow (.nav > li > * a:hover):

background-color:#017865;

Line 36 of the js file needs to be this:

$(this).parent("li").toggleClass("hover").siblings('li').removeClass("hover");