Hamburger Menu – Basic

This page demonstrates a basic hamburger menu that replaces the default drop-down menu on mobile viewport sizes. To see a demonstration, re-size the browser window until it is the same width as a smart phone or tablet, and you will see an icon appear with three, short horizontal lines. Clicking or tapping on the icon will reveal the menu, and clicking/tapping the icon again will hide the menu.

The concepts and CSS for creating the hamburger menu were borrowed from this GitHub page, although instead of pushing the content to the right, the menu container was positioned as absolute so that it slides over the page content.

After reviewing this page, take a look at the page on Hamburger Menu – Breadcrumb Bar to see how the hamburger button can be integrated into the left side of the breadcrumbs bar. There is also a demo here that shows how the hamburger menu can slide down from the top of the screen.

If you would like to learn how to implement this, visit the BytesForAll Gold forum. Not a Gold member? All it takes is a $20 donation to support what I believe to be the most customizable (and free) WordPress theme.

Leave a Reply

Your email address will not be published. Required fields are marked *