Burger menu icons are everywhere in today’s web sites and application interfaces. Good or bad for user experience, this debate is not the subject here.
Design request
I had a design request where desktop interface get a button with both a “Menu” label and a burger menu icon next to it and the mobile interface get a simplified burger menu icon on the far right of the header.
Bootstrap been very popular these days for building fast responsive HTML layouts it’s not surprising to get burger menu in it’s Glyphs library … D’oupssss! There is NO burger menu available in the Glyphicons Free Edition used by Bootstrap’s Components.
In fact by default Bootstrap use burger menu only within the Navbar Component when responsive kicks in.
Even worst for designers, it is not a define object (image or graph), you can’t use it out of the Navbar context. It is a pure semantic hack that takes 3 HTML <span>
tags wrapped within a <button>. OK there is the <span class="sr-only">
fix but that is really a minimum to pass accessibility QA.
So I have designed a custom burger menu based on Bootstrap’s “icon-bar” LESS code lines.
HTML source code
001 002 003 004 005 006 007 008 | < button id = "main-menu-dropdown" class = "btn btn-primary dropdown-toggle" type = "button" data-toggle = "dropdown" title = "Toggle navigation" > < span class = "string" >Menu</ span > < span class = "ico ico-burger-menu" title = "Menu" > < span class = "icon-bar" ></ span > < span class = "icon-bar" ></ span > < span class = "icon-bar" ></ span > </ span > </ button > |
The get the burger wrapped within a border you just add the class “border” to <span class="ico ico-burger-menu border">
Layout “Bootstrap style” by default
-
Default icon layout (whitout border)
<span class="ico ico-burger-menu">
-
Icon wrapped within border
<span class="ico ico-burger-menu border">
LESS code lines
001 002 003 004 005 006 007 | // ico-burger-menu is generated with the glyphicon icon method from bootstrap @burger-menu- color : lighten(@dropdown-caret-color, 50% ); // ico-burger-menu within bootstrap buttons @burger-menu-default- color : lighten(@btn-default-color, 20% ); @burger-menu-primary- color : @btn-primary-color; // ico-burger-menu hover @burger-menu-hover- color : darken(@burger-menu-color, 30% ); |
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 | /* * ------------------- * Burger Menu */ .ico { .glyphicon; &.ico-burger-menu { display : inline-block ; min-width : 18px ; max-width : 32px ; min-height : 18px ; text-align : center ; vertical-align : middle ; background-color : transparent ; &.border { min-width : 20px ; margin-top : -4px ; padding : 1px 2px ; border : 1px solid @burger-menu-color; border-radius : 2px ; // within bootstrap buttons .btn- default & { border-color : @burger-menu-default-color; } .btn-primary & { border-color : @burger-menu-primary-color; } } // Bars (style from navbar.less) .icon-bar { display : block ; min-height : 2px ; margin : 2px auto ; border-radius : @border-radius- small ; background-color : @burger-menu-color; // within bootstrap buttons .btn- default & { background-color : @burger-menu-default-color; } .btn-primary & { background-color : @burger-menu-primary-color; } .dropdown.open .btn &, .btn:hover & { background-color : @burger-menu-hover-color; } } &:focus { outline : 0 ; } &:hover, &:focus, .btn:hover & { text-decoration : none ; } .btn-primary & { text-decoration : none ; } } } |
You must be logged in to post a comment.