Responsive menu: toggle adds inline styles

[bg17aw]

I am trying to create a simple responsive hamburger menu type: http://codepen.io/bg17aw/pen/yOzvpE

However, since toggle adds inline styles of “display:none” this creates an issue where each time I re-size to mobile view (less than 768px) and press on the hamburger twice (once to show the menu, once to hide it), then re-size viewport to desktop view (above 768px), the navigation remains hidden because of the inline styles.

The exact same issue is described here: https://css-tricks.com/forums/topic/issue-with-jquery-slidetoggle-display-none/ however I don’t want to use “!important” if possible and also not sure if it is a good idea to track viewport changes using $(window).resize(function(){} approach (can someone advise against/for this method?)

Any ideas, suggestions to solve this or just to improve the code would be highly appreciated.

Thank you!

[Atelierbram]

With the jQuery resize function, you can get what you want I think

$(window).resize(function(){
    var winwidth = $(window).innerWidth();
    if(winwidth < 768){
        $('.navigation').hide();    
    }
    if(winwidth > 768){
        $('.navigation').show();    
    }
});

fork of your demo

Although the advice by @Podders with toggling classes on elements and using transitions seems even better to me.

[bg17aw]

Thanks @Atelierbram,

I’ll use the resize event if I can’t find another solution, although I don’t like it because it is called a lot and not sure how some devices will report their screen size

Please note transitions look a bit jerky compared to jquery slide, not sure why that is.

[Atelierbram]

I think that function is save to use. The resize event is only called when the window is resized, no? So on a bigger tablet that would be switching back and forth from horizontal to vertical, and that’s exactly what you want..

Please note transitions look a bit jerky compared to jQuery slide, not sure why that is.

Don’t really know. Have been transitioning padding-bottom with max-height in things like this and they feel fine to me.

On the removeClass addClass, I think that’s a matter of preference and/or related how it is used in the CSS. Can imagine doing it like this makes it a bit more flexible and easier to handle in media-queries with overriding values; unambiguous.

[Shikkediel]

A way to avoid many resize events being fired would be to use a debounce function. Although in practice, only web devs resizing the browser window will make this occur. The function to be executed is also minimal so I can’t imagine a machine that would have trouble with it.

I’ve found that $(window).width() is utterly cross browser reliable by the way.

[bg17aw]

Regarding transitions being jerky compared to jquery slide, you can see this in the 2 fiddles from the link I posted with the similar question:

This one shows a really smooth animation using jquery: http://jsfiddle.net/pak6a/28/

This one looks jerky (I can’t think of a better word, but if you open it you will notice something is different, it’s like parts of the animation become faster): http://jsfiddle.net/2HSU2/7/

[Atelierbram]

Played with it and changed the cubier bezier curve with the help of this webapp and made the transition a bit slower.

My fork of your demo

What makes it smoother I think is allowing for the “easing out” of the bezier curve to be noticeable by making the transition slower.

[bg17aw]

Thanks a lot, lots of useful info!
It looks much smoother now.

Did you try your codepen on an iPad/iPhone?
The “Click to Toggle” button gets a border around it every time it is pressed. Not happening on Android.

Do you have any idea if there is anyway to avoid that? Not really related to the original post, but I was actually looking for a solution for that as well.

[Atelierbram]

Glad to be of help, learned something myself. Not sure about the border, can’t reproduce on the iPad. Maybe it’s an outline? `button:active { outline: none; } ? = just a guess …

[bg17aw]

It’s definitely there on iPad/iPhone, and I’ve seen a few other people asking how this could be solved.

The easiest way to see it: just keep your finger on the button and you will see a grey outline around it, that makes the button bigger.

outline: none didn’t work on focus or active. I think it is sort of a selection that takes place.

[Author]

Posts