Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

A Simple Hamburger Menu


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 13, 2014, 12:33 AM
CrouchingBruin's Avatar
CrouchingBruin
 
192 posts · Aug 2010
Santa Monica, CA
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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Jun 23, 2014 at 11:54 AM. Reason: Tutorial moved to Gold forum
  #2  
Old Jun 8, 2014, 12:23 PM
SharonJ's Avatar
SharonJ
 
545 posts · Sep 2010
Duncan BC Canada
Wow. That is pretty amazing. I will give it a try on one of my test sites! would this work with any theme? Atahualpa?
  #3  
Old Jun 8, 2014, 03:25 PM
CrouchingBruin's Avatar
CrouchingBruin
 
192 posts · Aug 2010
Santa Monica, CA
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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #4  
Old Jun 8, 2014, 06:23 PM
SharonJ's Avatar
SharonJ
 
545 posts · Sep 2010
Duncan BC Canada
Yay. I am a Diamond member and I donate as often as I can. thank you CrouchinBruin

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Simple question about page menu bar hover crashley1784 Page & Category Menu Bars 2 Apr 24, 2011 07:33 PM
Category menu: three simple problems GeorgHuber Page & Category Menu Bars 7 Mar 17, 2011 03:54 PM
Simple no-PHP menu that doesn't use Menu1 sccornwell Header configuration & styling 1 Oct 31, 2009 05:27 AM
Trying to convert my page menu bar to the format on my simple machines forum page.. Joelb53 Page & Category Menu Bars 1 Apr 5, 2009 03:01 PM


All times are GMT -6. The time now is 01:47 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.