Forums

lprintz

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

Please take a look at 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/

AndyHowells

I'd recommend using javascript to add a class to the arrow container when it's clicked and then remove it when it is clicked again or something else is.

I actually did something just like this in an accordion on a site I'm building for a customer right now --> http://southernindustrialdoors.co.uk/products

The code for this (which I'm sure is not the most efficient!) is;


        $(document).ready(function() {
            var allPanels = $('.accordion-content').hide();
            $('.accordion > .accordion-link > a').click(function() {
                allPanels.slideUp();
                if($(this).parent().next().is(':hidden'))
                {
                    $('.accordion-link').removeClass("active");
                    $(this).parent().addClass("active");
                    $(this).parent().next().slideDown();
                }
                else if($(this).parent().next().not(':hidden'))
                {
                    $(this).parent().removeClass("active");
                    allPanels.slideUp();
                }
                return false;
            });
        });

What I'm doing is adding a class of "active" to the currently selected accordion block, then when it or something else is clicked it removes that class.

The arrows are via my CSS using;


.accordion-link:after {
    content: "\2192"; //right arrow hex
    padding-left: 15px;
}
.accordion-link.active {
      background: brown;
}
.accordion-link.active a:after {
    content: "\2193"; // down arrow hex
    padding-left: 15px;
}

treehouse : what would you like to learn today?

Forums

'simple' CSS tweaks needed for a responsive menu