{"id":3708,"date":"2024-01-11T16:54:00","date_gmt":"2024-01-11T16:54:00","guid":{"rendered":"https:\/\/codehim.com\/?p=3708"},"modified":"2024-01-22T14:55:25","modified_gmt":"2024-01-22T09:55:25","slug":"responsive-hamburger-menu-with-jquery-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/","title":{"rendered":"Responsive Hamburger Menu with jQuery &#038; CSS"},"content":{"rendered":"<section class=\"cm-tb\">\n<div class=\"cm-row\">\n<p class=\"plugin-intro\"> A lightweight jQuery plugin that create responsive hamburger menu. The menu comes with two versions (for both desktop and mobile) view. On desktop view, the menu is horizontal menubar with logo and navigation links. On mobile view, the menu shows hamburger toggle menu. <\/p>\n<p>The plugin uses Font Awesome CSS library for hamburger icon. The icon toggle the menu, user can easily navigate through menu.<\/p>\n<\/p><\/div>\n<\/section>\n<section class=\"codehim-wrapper\">\n<div class=\"d-row\">\n<h2>Plugin Preview<\/h2>\n<figure class=\"item-preview\"> <div id=\"featured-img-id\"><img decoding=\"async\" src=\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg\" alt=\"Responsive Hamburger Menu with jQuery &amp; CSS\" \/><\/div> <\/figure>\n<div class=\"item-like-share\"> <div class=\"codehim-share\"> <span class=\"share-title\">Share this:<\/span> <span class=\"share-btn-container\"> <\/span> <\/div> <\/div>\n<p><span class=\"small-text\"><a href=\"https:\/\/codehim.com\/how-to-start-using-jquery\/\"> How to start using jQuery?<\/a><\/span><\/p>\n<p><span class=\"large-text\"><a href=\"https:\/\/codehim.com\"> More jQuery Top, Best and New Plugins <\/a><\/span><\/p>\n<p><span class=\"small-text\"><a href=\"https:\/\/codehim.com\/tag\/top-100\/\"> Top 100 jQuery Plugins<\/a><\/span><\/p>\n<\/div>\n<div class=\"d-row\">\n<h2> Plugin Overview<\/h2>\n<table class=\"plugin-overview\">\n<tbody>\n<tr>\n<td><i class=\"fa fa-plug\"><\/i> Plugin:<\/td>\n<td>js-jq-hamburger<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-user\"><\/i> Author:<\/td>\n<td>Walter Satriano<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-file-text-o\"><\/i> Licence:<\/td>\n<td><a href=\"https:\/\/opensource.org\/licenses\/MIT\" class=\"external\" target=\"_blank\" rel=\"noopener noreferrer\"> MIT Licence<\/a><\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-calendar-check-o\"><\/i> Published:<\/td>\n<td class=\"publish-date\">January 11, 2024<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-github\"><\/i>Repository:<\/td>\n<td> <a href=\"https:\/\/github.com\/Walter-Satriano\/js-jq-hamburger\" target=\"_blank\" class=\"external\" rel=\"noopener noreferrer\">Fork on GitHub <\/a><\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-link\"><\/i> Dependencies:<\/td>\n<td><a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" class=\"external\" rel=\"noopener noreferrer\">jQuery 1.3.1 <\/a> or Latest version and <a href=\"https:\/\/fontawesome.com\/download\" target=\"_blank\" class=\"external\" rel=\"noopener noreferrer\"> Font Awesome 5 <\/a><\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-file-code-o\"><\/i> File Type:<\/td>\n<td>zip archive (HTML, CSS &#038; JavaScript )<\/td>\n<\/tr>\n<tr>\n<td><i class=\"fa fa-file-archive-o\"><\/i> Package Size:<\/td>\n<td>17.3 KB <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"cd-action\"><a class=\"btn demo\" target=\"_blank\" href=\"\/demo\/jquery-responsive-hamburger-menu\/\" rel=\"nofollow noopener noreferrer\"> Demo <\/a><a class=\"btn download\" href=\"\/download\/jquery-responsive-hamburger-menu.zip\" rel=\"nofollow\"> Download<\/a><\/div>\n<\/div>\n<\/section>\n<h2> How to Use jQuery Responsive Hamburger Menu<\/h2>\n<p>1. First of all load <strong>jQuery<\/strong> JavaScript library and <strong>Font Awesome 5<\/strong> into your HTML document to getting started with <strong>hamburger menu<\/strong>.<\/p>\n<pre class=\"prettyprint lang-html\">\r\n&lt;!-- jQuery --&gt;\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!-- Fontawesome 5--&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css\"&gt;\r\n<\/pre>\n<p>2. Now include hamburger menu&#8217;s JavaScript and CSS file.<\/p>\n<pre class=\"prettyprint lang-html\">\r\n&lt;!-- Hamburger Menu CSS --&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt; \r\n\r\n&lt;!-- Hamburger Menu JS --&gt;\r\n&lt;script src=\"js\/main.js\" charset=\"utf-8\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>3. Create <code>header<\/code> element and put both desktop &#038; mobile version of your navigation links. The horizontal menu will show on large screen (desktop) and hamburger menu will display on mobile devices. <\/p>\n<pre class=\"prettyprint lang-html\">\r\n&lt;header&gt;\r\n   &lt;div class=\"header-left\"&gt;\r\n      &lt;img src=\"img\/logo.png\" alt=\"\"&gt;\r\n   &lt;\/div&gt;\r\n   &lt;div class=\"header-right\"&gt;\r\n      &lt;ul&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\"&gt;Scopri il Corso&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\"&gt;La nostra storia&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\" class=\"cta\"&gt;Iscriviti&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n      &lt;a href=\"#\"&gt;\r\n      &lt;i class=\"fas fa-bars\"&gt;&lt;\/i&gt;\r\n      &lt;\/a&gt;\r\n   &lt;\/div&gt;\r\n   &lt;div class=\"hamburger-menu\"&gt;\r\n      &lt;ul&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\"&gt;Scopri il Corso&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\"&gt;La nostra storia&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n         &lt;li&gt;\r\n            &lt;a href=\"#\" class=\"cta\"&gt;Iscriviti&lt;\/a&gt;\r\n         &lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n      &lt;a href=\"#\" class=\"close\"&gt;\r\n      &lt;i class=\"fas fa-times\"&gt;&lt;\/i&gt;\r\n      &lt;\/a&gt;\r\n   &lt;\/div&gt;\r\n&lt;\/header&gt;\r\n<\/pre>\n<p>4. To use inline CSS or customize styles. <\/p>\n<pre class=\"prettyprint lang-css\">\r\nheader {\r\n    padding: 0 20px;\r\n    width: 100%;\r\n    height: 70px;\r\n    background: white;\r\n    border-bottom: 1px solid #efefef;\r\n}\r\n.header-left, .header-right {\r\n    float: left;\r\n    height: 100%;\r\n}\r\n.header-left {\r\n    width: 20%;\r\n}\r\n.header-right {\r\n    width: 80%;\r\n}\r\n.header-left img {\r\n    height: 40px;\r\n    margin-top: 15px;\r\n}\r\n.header-right &gt; a {\r\n    display: none;\r\n}\r\n.header-right ul {\r\n    list-style: none;\r\n    height: 100%;\r\n    text-align: right;\r\n}\r\n.header-right ul li {\r\n    display: inline-block;\r\n    margin: 0 20px;\r\n    line-height: 70px;\r\n    height: 100%;\r\n}\r\n.header-right ul li a {\r\n    color: #565A5C;\r\n    text-decoration: none;\r\n}\r\n.header-right ul li a.cta {\r\n    padding: 10px 20px;\r\n    color: white;\r\n    background: #E78D5C;\r\n}\r\n\r\n.hamburger-menu {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    display: none;\r\n    padding: 20px;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-width: 100vw;\r\n    min-height: 100vh;\r\n    background: #2B3F58;\r\n}\r\n.hamburger-menu ul {\r\n    display: flex;\r\n    height: 100%;\r\n    flex-direction: column;\r\n    justify-content: space-around;\r\n    align-items: flex-start;\r\n    list-style: none;\r\n}\r\n.hamburger-menu ul li a {\r\n    color: white;\r\n    text-decoration: none;\r\n    font-size: 25px;\r\n    border-bottom: 2px solid white;\r\n}\r\n.close {\r\n    display: block;\r\n    position: absolute;\r\n    right: 20px;\r\n    top: 20px;\r\n    color: white;\r\n    font-size: 35px;\r\n    text-decoration: none;\r\n}\r\n@media screen and (max-width: 1000px)\r\n{\r\n    .header-right ul {\r\n        display: none;\r\n    }\r\n    .header-right &gt; a {\r\n        display: block;\r\n        height: 100%;\r\n        line-height: 70px;\r\n        float: right;\r\n        color: lightgrey;\r\n        font-size: 20px;\r\n    }\r\n\r\n    .hamburger-menu.active {\r\n        display: block;\r\n    }\r\n}\r\n<\/pre>\n<p>5. If you want to use inline script, then you can use the following jQuery function.<\/p>\n<pre class=\"prettyprint lang-js\">\r\n$(document).ready(function(){\r\n  $(\".header-right &gt; a\").click(function() {\r\n    $(\".hamburger-menu\").addClass(\"active\");\r\n  });\r\n  $(\".close\").click(function() {\r\n    $(\".hamburger-menu\").removeClass(\"active\");\r\n  });\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A lightweight jQuery plugin that create responsive hamburger menu. The menu comes with two versions (for both desktop and mobile)&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3709,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[49,15,92],"class_list":["post-3708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu","tag-hamburger-menu","tag-horizontal-menu","tag-mobile-menu"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Hamburger Menu with jQuery &amp; CSS &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free responsive hamburger menu created with jQuery, CSS and Font Awesome. This is horizontal menu on desktop and hamburger menu on mobile.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Hamburger Menu with jQuery &amp; CSS &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free responsive hamburger menu created with jQuery, CSS and Font Awesome. This is horizontal menu on desktop and hamburger menu on mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:55:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"962\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Responsive Hamburger Menu with jQuery &#038; CSS\",\"datePublished\":\"2024-01-11T16:54:00+00:00\",\"dateModified\":\"2024-01-22T09:55:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\"},\"wordCount\":213,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg\",\"keywords\":[\"Hamburger Menu\",\"Horizontal Menu\",\"Mobile Menu\"],\"articleSection\":[\"Menu &amp; Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\",\"url\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\",\"name\":\"Responsive Hamburger Menu with jQuery & CSS &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg\",\"datePublished\":\"2024-01-11T16:54:00+00:00\",\"dateModified\":\"2024-01-22T09:55:25+00:00\",\"description\":\"Here is a free responsive hamburger menu created with jQuery, CSS and Font Awesome. This is horizontal menu on desktop and hamburger menu on mobile.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg\",\"width\":1280,\"height\":962,\"caption\":\"Responsive Hamburger Menu with jQuery & CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu &amp; Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Responsive Hamburger Menu with jQuery &#038; CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Hamburger Menu with jQuery & CSS &#8212; CodeHim","description":"Here is a free responsive hamburger menu created with jQuery, CSS and Font Awesome. This is horizontal menu on desktop and hamburger menu on mobile.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Hamburger Menu with jQuery & CSS &#8212; CodeHim","og_description":"Here is a free responsive hamburger menu created with jQuery, CSS and Font Awesome. This is horizontal menu on desktop and hamburger menu on mobile.","og_url":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:54:00+00:00","article_modified_time":"2024-01-22T09:55:25+00:00","og_image":[{"width":1280,"height":962,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg","type":"image\/jpeg"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Responsive Hamburger Menu with jQuery &#038; CSS","datePublished":"2024-01-11T16:54:00+00:00","dateModified":"2024-01-22T09:55:25+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/"},"wordCount":213,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg","keywords":["Hamburger Menu","Horizontal Menu","Mobile Menu"],"articleSection":["Menu &amp; Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/","url":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/","name":"Responsive Hamburger Menu with jQuery & CSS &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg","datePublished":"2024-01-11T16:54:00+00:00","dateModified":"2024-01-22T09:55:25+00:00","description":"Here is a free responsive hamburger menu created with jQuery, CSS and Font Awesome. This is horizontal menu on desktop and hamburger menu on mobile.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2019\/08\/jquery-simplest-hamburger-menu.jpg","width":1280,"height":962,"caption":"Responsive Hamburger Menu with jQuery & CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/responsive-hamburger-menu-with-jquery-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu &amp; Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"Responsive Hamburger Menu with jQuery &#038; CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":9662,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/3708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=3708"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/3708\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/3709"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=3708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=3708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=3708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}