CSS - Mobile Menu Trigger

Question

I am building a menu for a responsive website - my query is what people think is the best solution for showing / hiding the menu.

I have setup the menu in this jsfiddle - http://jsfiddle.net/paul_dance/5z7rvvn4/2/

The menu is hidden at 768px and a button is show - I was thinking of adding a simple js script

$('.menu-btn).click(function(){
  $('nav ul').slidetoggle();

});

or similar..

which toggles the menu on click - but my fear is if the user hides it again then expands their screen beyond 768 the menu will remain hidden and no button present to re-show.

Is there a better cross browser / device solution available? Or a CSS only solution? This needs to work on IE8 also.

CodingWithSpike · Accepted Answer · 2014-11-16 19:55:25Z

1

Instead of using slideToggle, just toggle an open class on the #nav element. Then in your "mobile" sized media query, have #nav.open display the menu (i did this by setting #nav.open > ul to display:block;).

example:

http://jsfiddle.net/rally25rs/5z7rvvn4/3/

The example isnt animated, but you could add a CSS3 transition on height instead of just changing the display:none; of the element. CSS3 transitions wont work in IE 8 or 9, the menu will just appear, but no mobile devices run IE8 or 9, so that really shouldn't be an issue.

answered Nov 16, 2014 at 19:55

CodingWithSpike

43.9k18 gold badges106 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RGLSV · Accepted Answer · 2014-11-16 20:08:51Z

1

Well, there are a couple of solutions to your problem, like this:

*instead of slidetoggle, use a toggleClass, that only works on 768px or bellow like this;

*or use a css only approach with a checkbox and a label on top of your code, replacing the button tag with a label tag; when the checkbox will be checked the menu will be shown, like this;

answered Nov 16, 2014 at 20:08

RGLSV

2,0681 gold badge23 silver badges39 bronze badges

Collectives™ on Stack Overflow

CSS - Mobile Menu Trigger

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related