Below is a simple rendition using basic web technology. I used this recently as part of\u00a0 a website that showcases the work of a graphic artist.<\/p>\n
![\"mobile](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/08\/mobile-menu.png\")
<\/p>\n
HTML:<\/strong><\/p>\n Drop this code in your header file for the menu (list of links) itself.<\/p>\n Next, add this to your existing navigation, or wherever you’d like the hamburger button to show.<\/p>\n I used FontAwesome<\/a> to generate the hamburger icon itself (and the close icon). Alternatively, you can use an image file.<\/p>\n CSS:<\/strong><\/p>\n This code sets the hamburger button to only show on mobile devices. Mobile devices are specified at 787px or less by a media query.<\/p>\n JavaScript:<\/strong><\/p>\n With jQuery:<\/p>\n Or, plain vanilla JS:<\/p>\n <\/p>\n By the way, this is the tool I’ve been using to encode the HTML I paste into my WordPress posts (that way, it doesn’t actually render on page):\u00a0https:\/\/github.com\/mathiasbynens\/mothereff.in\/tree\/master\/html-entities<\/a><\/p>\n<div class=\"mobile-menu\">\n\t<span class=\"close-mobile-menu\"><i class=\"far fa-times-circle\"><\/i><\/span>\n\n\t<ul>\n\n\t\t\t<li><a href=\"\/biography\">Biography<\/a><\/li>\n\t\t\t<li><a href=\"\/education\">Education & Awards<\/a><\/li>\n\t\t\t<li><a href=\"\/reviews?order=asc\">Reviews<\/a><\/li>\n\t\t\t<li><a href=\"\/etchings\">Etchings<\/a><\/li>\n\t\t\t<li><a href=\"\/category\/paintings\/1960s\/\">Paintings<\/a><\/li>\n\t\t\t<li><a href=\"\/mukfa-about\">Mukfa<\/a><\/li>\n\t\t\t<li><a href=\"\/category\/drawings\/human-comedy\/\">Drawings<\/a><\/li>\n\t\t\t<li><a href=\"\/exhibitions-and-collections\">Exhibitions & Collections<\/a><\/li>\n\n\t<\/ul>\n\n<\/div>\n<\/pre>\n
<div class=\"mobile-hamburger mobile-only\"><i class=\"fas fa-bars\"><\/i><\/div>\n\n<\/pre>\n
![\"hamburger](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/11\/hamburger-menu.png\")
<\/p>\n.mobile-hamburger{\n\tfont-size: 36px;\n\tcolor: #005FAA;\n\tfloat: right;\n\tcursor: pointer;\n\tmargin-right: 16px;\n\tmargin-top: 5px;\n\n}\n.mobile-menu{\n\tdisplay: none;\n\twidth: 100%;\n\tbackground: #DCC7AA;\n\tposition: fixed;\n\theight: 100%;\n\tright: 0;\n\ttop: 0;\n\tz-index: 20;\n}\n.mobile-menu ul{\n\tlist-style-type: none;\n\tfont-size: 16px;\n\ttext-align: left;\n\tpadding: 25px;\n\tmargin: 50px 0px;\n}\n\n.mobile-menu ul li{\n\tmargin-top: 15px;\n}\n\n.close-mobile-menu{\n\tposition: absolute;\n\ttop: 5px;\n\tright: 16px;\n\tfont-size: 36px;\n\tcursor: pointer;\n}\n\n@media only screen and (min-width:787px) {\n\t.mobile-only{display: none;}\n}\n<\/pre>\n(function ($, root, undefined) {\n\n\t$(function () {\n\n\t\t'use strict';\n\n\t\t\/\/ DOM ready, take it away\n\t\t$(\".mobile-hamburger\").click(function(){\n\t\t\t$(\".mobile-menu\").show();\n\t\t});\n\n\t\t$(\".close-mobile-menu\").click(function(){\n\t\t\t$(\".mobile-menu\").hide();\n\t\t});\n\n\n\n\t});\n\n})(jQuery, this);\n\n<\/pre>\ndocument.addEventListener('click', function (event) {\n\n\tif (!event.target.matches('.mobile-hamburger')){\n\t\treturn;\n\t}\n\n\tdocument.getElementsByClassName('mobile-menu')[0].style.display = 'block';\n\n}, false);\n\ndocument.addEventListener('click', function (event) {\n\n\tif (!event.target.matches('.close-mobile-menu')){\n\t\treturn;\n\t}\n\n\tdocument.getElementsByClassName('mobile-menu')[0].style.display = 'none';\n\n}, false);\n<\/pre>\n
\n
![\"html](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/11\/html-entity-encoded-decoded.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"