A Simple Hamburger Menu
 

Someone asked recently if a hamburger menu could be added to Montezuma, to replace the drop-down list that's displayed on mobile devices. I thought it would be a good project to work on, so I spent a few hours on it today, and here are the results for those who might be interested in implementing this.

If the term "hamburger menu" is unfamiliar to you, you've probably seen it but not realized what it was called. Take a look on my sandbox site. If you are looking at the site on a desktop, shrink the width of the browser window until it becomes the same width of a tablet or a smart phone (or look at it using a tablet or smart phone). You'll see that at some point, the regular navigation menu will disappear and, instead of a drop-down list, a familiar-looking (hopefully) button with three, short horizontal lines appears. I think the icon is supposed to represent a menu with three different items, but I guess some hungry person thought that it looked like a hamburger patty inside a bun, hence the common name of hamburger menu. Tapping/clicking on the button causes the actual menu contents to slide out from the left. Tapping on the button again hides the menu. The latest Wordpress theme, Twenty Fourteen, also uses a hamburger menu on mobile resolutions, although that menu drops in from the top.

This demo page on my sandbox site shows the hamburger menu icon integrated into the breadcrumbs bar.

This demo page shows how the hamburger menu can drop in from the top, instead of from the side.

To find out how I implemented this in Montezuma, visit the Gold Members forum.

Wow. That is pretty amazing. I will give it a try on one of my test sites! would this work with any theme? Atahualpa?

The concepts will work with any theme, but the instructions are specific to Montezuma. It will probably work well with Atahualpa since the theme allows new widget areas to be added, HTML code to be added in different sections, and it is easy to add your own JavaScript. This sounds like a nice project to work on, maybe I'll do it this week.

I will probably move this thread into the Gold forum in the next few days as a perk to the Gold members. For anyone who is not a Gold member, and appreciate the premium-quality themes and support, please make a donation to BytesForAll (or either of the moderators) and become a Gold member.

Yay. I am a Diamond member and I donate as often as I can. thank you CrouchinBruin