Simple jQuery Mobile Menu

Toggling the Mobile Menu

I've included two menu toggle (open/close) styles above. The navicon (3 bar button) at the top right is becoming the mobile standard icon for menu toggling. If you are using Chrome, look to the top right of your browser and you will see it. The other menu toggle button to the left spells out what it is for. This style can be of assistance to those who are new to tablet/smartphone browsing and old people.

You could also turn the entire black bar into a menu toggle bar by adding class="mtoggle" to the nav tag.

Mobile Menu Bar Positioning

If you add position:fixed styling rule to the nav tag css, the menu bar will stay fixed at the top of the screen as the user scroll down your page. It's convienent having the menu bar always available, but it takes away from screen real estate. If you do make the menu bar fixed, make sure you add enough top padding to the first item in the page to be sure it doesn't try to go behind the bar and dissapear.

Or you could make it position:absolute if you didn't want the page content to be pushed down when the menu was opened.

Hiding the Mobile Menu on Large Screens

You will want to hide this mobile menu on large screen devices and use your primary menu system instead. Use reponsive css to achive this. For your large screen CSS, set nav#mobile to display:none. In your mobile CSS, set nav#primary-navigation-id to display:none.

Back to the Simple jQuery Mobile Menu article.