Burger Navigation Menu

By now, the burger icon ( burger icon image ) is ubiquitous in apps and web pages designed for mobile devices.

Generally, clicking or tapping on it reveals a menu of functions, features, or destinations. Clicking or tapping the burger a second time, hides the menu.

I'll describe how to make a burger icon menu system for search-engine friendly web page navigation links.

On the right is a working example.

The menu can be redesigned to be consistent with your page design — boxed, in solid-colored bars, in circles, whatever is required for your page. And the menu can be positioned anywhere relative to the burger icon — left, right, above, below.

It's friendly with non-JavaScript browsers and screen readers. It's friendly with search engine spiders.

And it's easy to use. Tap or click to select your destination — or tap the burger a second time to close the menu.

How It's Friendly With Non-JavaScript Browsers

When the menu first loads, it's open. JavaScript closes it.

If the browser is JavaScript-disabled, the menu stays open so the choices can be clicked on.

How It's Friendly With Search Engine Spiders

The menu loads open. The links are regular HTML "A" tag links, what search engine spiders expect.

Spiders and robots find the links just like they would in a regular menu.

How It's Easy To Use

Tap or click the burger icon to open and close the menu.

Tap or click on a menu item to navigate to that page.

Implementing the Burger Navigation Menu

Four things are put together for the burger navigation menu.

The burger icon image.
The menu.
The CSS declarations.
The JavaScript.

Each is described separately.

i. The Burger Icon

You'll need a burger icon image. If you prefer not to make your own, you're welcome to download ours and use it on your server.

Download the burger color of your choice (right-click and save should work). If you have a vector graphics program, download the SVG file to give the burger icon a custom color or dimensions.

SVG File

The burger icon image will be in a div (see items ii and iii, below) and placed where you want it on the page.

ii. The Menu

This is highly customizable. Other than the requirement to publish a burger icon image where it's clickable or tapable, everything can be designed and positioned as you desire.

Here's the code for the working example further above. Comments follow.

<div id="burger-holder" onclick="ReverseHamburgerMenuDisplay()">

<img src="//www.willmaster.com/library/example/Burger/burger-blue.png" style="border:none; width:42px; height:26px;" alt="navigation icon">

<div id="burger-menu" style="display:block;">
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/'"><a href="//www.willmaster.com/">Home</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/software/'"><a href="//www.willmaster.com/software/">Software</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/software/custom/'"><a href="//www.willmaster.com/software/custom/">Custom</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/support/'"><a href="//www.willmaster.com/support/">Support</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/library/'"><a href="//www.willmaster.com/library/">Library</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/blog/'"><a href="//www.willmaster.com/blog/">Blog</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/possibilities/'"><a href="//www.willmaster.com/possibilities/">Ezine</a></div>
<div onmouseover="HamburgerMenuItemOver(this)" onmouseout="HamburgerMenuItemOut(this)" onclick="location.href='//www.willmaster.com/software/WebSitesSecret/'"><a href="//www.willmaster.com/software/WebSitesSecret/">WebSite's Secret</a></div>
</div><!-- id="burger-menu" -->

</div><!-- id="burger-holder" -->

Everything is in a div with id="burger-holder" (HTML "div" tag colored blue in the above source code). See item iii for the CSS used by the menu.

The burger icon comes first, then the menu in the div with id="burger-menu". In the CSS declaration, the id="burger-holder" contains position:relative; and the id="burger-menu" contains position:absolute; — which means the menu can be placed anywhere relative to the burger icon.

In the working example, each menu item is in a div tag and on a line by itself.

If your menu will always be only for mobile devices without a mouse, the onmouseover and onmouseout attributes may be removed.

The onclick attributes may also be extraneous, depending on how you design the menu, because the menu items themselves contain HTML a tag links. The working example contains the onclick attributes so the click or tap doesn't need to be on the word itself, but anywhere on the line, to take the browser to the link destination.

Other than the mentioned attributes, the functionality is provided by the "A" tag link.

All of the design is done with CSS.

iii. The CSS Declarations

Here's the code for the CSS of the working example. Comments follow.

<style type="text/css">
#burger-holder {
   position:relative; 
   background-color:transparent; 
   width:42px; 
   height:26px; 
   cursor:pointer; 
   }

#burger-menu {
   position:absolute; 
   left:-60px;
   top:30px;
   width:140px;
   background-color:white; 
   border:1px solid #eee; 
   border-radius:7px; 
   padding:5px 10px 5px 10px; 
   font-size:16px;
   line-height:150%;
   color:#2F8CDB;
   white-space:nowrap;
   }

#burger-menu a {
   color:#2F8CDB;
   text-decoration:none;
   }
</style>

I'll mention only two of the declarations, the ones you'll probably want to keep. The rest all are customizable to be consistent with your site design.

The #burger-holder selector is for the div containing the burger icon and the menu.

You'll probably want to keep the #burger-holder position:relative declaration, which lets the div containing the menu be positioned relative to the burger.

The #burger-menu selector is for the div containing the burger menu. The div is located within the div with id="burger-holder".

You'll probably want to keep the #burger-menu position:absolute declaration, which lets the menu be positioned relative to the burger icon.

The CSS can be in your regular style sheet or a separate one, wherever CSS can be.

iv. The JavaScript

Here's the code for the JavaScript of the working example. Comments follow.

<script type="text/javascript">
document.getElementById("burger-menu").style.display="none";
function ReverseHamburgerMenuDisplay()
{
   var id = document.getElementById("burger-menu");
   if( id.style.display == "none" ) { id.style.display = "block"; }
   else { id.style.display = "none"; }
}
function HamburgerMenuItemOver(id) { id.style.backgroundColor = "#efefef"; }
function HamburgerMenuItemOut(id) { id.style.backgroundColor = "#fff"; }
</script>

The JavaScript needs to be somewhere below the menu in the source code. Because the JavaScript closes the menu when the page loads, the nearer it is to the menu in the source code the sooner the menu will close during initial loading.

If the div id="burger-menu" value was changed, then the JavaScript needs to be updated accordingly. The two places are colored blue.

If the onmouseover and onmouseout attributes are removed from the menu items, the JavaScript functions HamburgerMenuItemOver() and HamburgerMenuItemOut() may also be removed.

Putting It Together

The style sheet generally comes first. If it were to come after the elements it affects, the browser would change the elements according to the style sheet once it loads the CSS.

The burger icon and menu work together for positioning. Both are in a container div with CSS position:relative. The menu is in a div with CSS position:absolute. This allows positioning the menu anywhere relative to the top-left corner of the container div container div.

The JavaScript is in the source code somewhere below the menu.

When it works together, you have a burger navigation menu.

(This article first appeared in Possibilities ezine.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.