{"id":3663,"date":"2019-02-28T12:25:08","date_gmt":"2019-02-28T06:55:08","guid":{"rendered":"https:\/\/blog.pheonixsolutions.com\/?p=3663"},"modified":"2019-03-04T12:17:58","modified_gmt":"2019-03-04T06:47:58","slug":"create-accordion-menu-with-sidebar-hamburger-menu","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/","title":{"rendered":"Create accordion menu with sidebar hamburger menu"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Create accordion menu with sidebar hamburger menu<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">DATE POSTED: 27\/02\/2019<\/h4>\n\n\n\n<p>In this post we will explain how to create the accordion menu with sidebar hamburger menu. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Code<\/h2>\n\n\n\n<p><strong>STEP 1<\/strong>: In the header of the page we refer to stylesheet . This reference was made with the &lt;link> tag as follows:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link href=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/css\/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\">\n      &lt;source src=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/js\/bootstrap.min.js\">&lt;\/source>\n      &lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css\">\n      &lt;link rel='stylesheet' href='https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.0\/css\/bootstrap.min.css?ver=1.1' type='text\/css' media='all' \/>\n<\/pre>\n\n\n\n<p><strong>STEP 2:<\/strong>You can add the following style code into your &lt;head> tags.<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@import \"https:\/\/fonts.googleapis.com\/css?family=Poppins:300,400,500,600,700\";\n         body {\n         font-family: 'Poppins', sans-serif;\n         background: #fafafa;\n         }\n         p {\n         font-family: 'Poppins', sans-serif;\n         font-size: 1.1em;\n         font-weight: 300;\n         line-height: 1.7em;\n         color: #999;\n         }\n         a,\n         a:hover,\n         a:focus {\n         color: inherit;\n         text-decoration: none;\n         transition: all 0.3s;\n         }\n         #sidebarCollapse\n         {\n         position: fixed;\n         z-index: 2;\n         }\n         .navbar {\n         padding: 15px 10px;\n         background: #fff;\n         border: none;\n         border-radius: 0;\n         margin-bottom: 40px;\n         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);\n         }\n         .navbar-btn {\n         box-shadow: none;\n         outline: none !important;\n         border: none;\n         }\n         .line {\n         width: 100%;\n         height: 1px;\n         border-bottom: 1px dashed #ddd;\n         margin: 40px 0;\n         }\n         \/* ---------------------------------------------------\n         SIDEBAR STYLE\n         ----------------------------------------------------- *\/\n         #sidebar {\n         width: 250px;\n         position: fixed;\n         top: 0;\n         left: -250px;\n         height: 100vh;\n         z-index: 999;\n         background: #3765a3;\n         color: #fff;\n         transition: all 0.3s;\n         overflow-y: scroll;\n         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);\n         }\n         #sidebar.active {\n         left: 0;\n         }\n         #dismiss {\n         width: 35px;\n         height: 35px;\n         line-height: 35px;\n         text-align: center;\n         background: #3765a3;\n         position: absolute;\n         top: 10px;\n         right: 10px;\n         cursor: pointer;\n         -webkit-transition: all 0.3s;\n         -o-transition: all 0.3s;\n         transition: all 0.3s;\n         }\n         #dismiss:hover {\n         background: #fff;\n         color: #3765a3;\n         }\n         .overlay {\n         display: none;\n         position: fixed;\n         width: 100vw;\n         height: 100vh;\n         background: rgba(0, 0, 0, 0.7);\n         z-index: 998;\n         opacity: 0;\n         transition: all 0.5s ease-in-out;\n         }\n         .overlay.active {\n         display: block;\n         opacity: 1;\n         }\n         #sidebarmenu,\n         #sidebarmenu ul,\n         #sidebarmenu ul li,\n         #sidebarmenu ul li a {\n         margin: 0;\n         padding: 0;\n         border: 0;\n         list-style: none;\n         line-height: 1;\n         display: block;\n         position: relative;\n         -webkit-box-sizing: border-box;\n         -moz-box-sizing: border-box;\n         box-sizing: border-box;\n         }\n         #sidebarmenu {\n         width: 250px;\n         font-family: Helvetica, Arial, sans-serif;\n         color: #ffffff;\n         }\n         #sidebarmenu ul ul {\n         display: none;\n         }\n         .align-right {\n         float: right;\n         }\n         #sidebarmenu > ul > li > a {\n         padding: 15px 20px;\n         border-left: 1px solid #3765a3;\n         border-right: 1px solid #3765a3;\n         border-top: 1px solid #3765a3;\n         cursor: pointer;\n         z-index: 2;\n         font-size: 14px;\n         font-weight: bold;\n         text-decoration: none;\n         color: #ffffff;\n         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);\n         background: #3765a3;\n         background: -webkit-linear-gradient(#3765a3, #3765a3);\n         background: -moz-linear-gradient(#3765a3, #3765a3);\n         background: -o-linear-gradient(#3765a3, #3765a3);\n         background: -ms-linear-gradient(#3765a3, #3765a3);\n         background: linear-gradient(#3765a3, #3765a3);\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);\n         }\n         #sidebarmenu > ul > li > a:hover,\n         #sidebarmenu > ul > li.active > a,\n         #sidebarmenu > ul > li.open > a {\n         color: #eeeeee;\n         background: #3765a3;\n         background: -webkit-linear-gradient(#3765a3, #3765a3);\n         background: -moz-linear-gradient(#3765a3, #3765a3);\n         background: -o-linear-gradient(#3765a3, #3765a3);\n         background: -ms-linear-gradient(#3765a3, #3765a3);\n         background: linear-gradient(#3765a3, #3765a3);\n         }\n         #sidebarmenu > ul > li.open > a {\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);\n         border-bottom: 1px solid #3765a3;\n         }\n         #sidebarmenu > ul > li:last-child > a,\n         #sidebarmenu > ul > li.last > a {\n         border-bottom: 1px solid #3765a3;\n         }\n         .holder {\n         width: 0;\n         height: 0;\n         position: absolute;\n         top: 0;\n         right: 0;\n         }\n         .holder::after,\n         .holder::before {\n         display: block;\n         position: absolute;\n         content: \"\";\n         width: 6px;\n         height: 6px;\n         right: 20px;\n         z-index: 10;\n         -webkit-transform: rotate(-135deg);\n         -moz-transform: rotate(-135deg);\n         -ms-transform: rotate(-135deg);\n         -o-transform: rotate(-135deg);\n         transform: rotate(-135deg);\n         }\n         .holder::after {\n         top: 17px;\n         border-top: 2px solid #ffffff;\n         border-left: 2px solid #ffffff;\n         }\n         #sidebarmenu > ul > li > a:hover > span::after,\n         #sidebarmenu > ul > li.active > a > span::after,\n         #sidebarmenu > ul > li.open > a > span::after {\n         border-color: #eeeeee;\n         }\n         .holder::before {\n         top: 18px;\n         border-top: 2px solid;\n         border-left: 2px solid;\n         border-top-color: inherit;\n         border-left-color: inherit;\n         }\n         #sidebarmenu ul ul li a {\n         cursor: pointer;\n         border-bottom: 1px solid #32373e;\n         border-left: 1px solid #32373e;\n         border-right: 1px solid #32373e;\n         padding: 10px 20px;\n         z-index: 1;\n         text-decoration: none;\n         font-size: 13px;\n         color: #eeeeee;\n         background: #49505a;\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n         }\n         #sidebarmenu ul ul li:hover > a,\n         #sidebarmenu ul ul li.open > a,\n         #sidebarmenu ul ul li.active > a {\n         background: #424852;\n         color: #ffffff;\n         }\n         #sidebarmenu ul ul li:first-child > a {\n         box-shadow: none;\n         }\n         #sidebarmenu ul ul ul li:first-child > a {\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n         }\n         #sidebarmenu ul ul ul li a {\n         padding-left: 30px;\n         }\n         #sidebarmenu > ul > li > ul > li:last-child > a,\n         #sidebarmenu > ul > li > ul > li.last > a {\n         border-bottom: 0;\n         }\n         #sidebarmenu > ul > li > ul > li.open:last-child > a,\n         #sidebarmenu > ul > li > ul > li.last.open > a {\n         border-bottom: 1px solid #32373e;\n         }\n         #sidebarmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {\n         border-bottom: 0;\n         }\n         #sidebarmenu ul ul li.has-sub > a::after {\n         display: block;\n         position: absolute;\n         content: \"\";\n         width: 5px;\n         height: 5px;\n         right: 20px;\n         z-index: 10;\n         top: 11.5px;\n         border-top: 2px solid #eeeeee;\n         border-left: 2px solid #eeeeee;\n         -webkit-transform: rotate(-135deg);\n         -moz-transform: rotate(-135deg);\n         -ms-transform: rotate(-135deg);\n         -o-transform: rotate(-135deg);\n         transform: rotate(-135deg);\n         }\n         #sidebarmenu ul ul li.active > a::after,\n         #sidebarmenu ul ul li.open > a::after,\n         #sidebarmenu ul ul li > a:hover::after {\n         border-color: #ffffff;\n         }<\/pre>\n\n\n\n<p><strong>STEP 3 :<\/strong>You can add the following script code into your inside &lt;head&gt;.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"> \n        \n         \n         ( function( $ ) {\n           $( document ).ready(function() {\n           $('#sidebarmenu li.has-sub&gt;a').on('click', function(){\n               $(this).removeAttr('href');\n               var element = $(this).parent('li');\n               if (element.hasClass('open')) {\n                 element.removeClass('open');\n                 element.find('li').removeClass('open');\n                 element.find('ul').slideUp();\n               }\n               else {\n                 element.addClass('open');\n                 element.children('ul').slideDown();\n                 element.siblings('li').children('ul').slideUp();\n                 element.siblings('li').removeClass('open');\n                 element.siblings('li').find('li').removeClass('open');\n                 element.siblings('li').find('ul').slideUp();\n               }\n             });\n         \n             $('#sidebarmenu&gt;ul&gt;li.has-sub&gt;a').append('<span class=\"holder\"><\/span>');\n         \n             (function getColor() {\n               var r, g, b;\n               var textColor = $('#sidebarmenu').css('color');\n               textColor = textColor.slice(4);\n               r = textColor.slice(0, textColor.indexOf(','));\n               textColor = textColor.slice(textColor.indexOf(' ') + 1);\n               g = textColor.slice(0, textColor.indexOf(','));\n               textColor = textColor.slice(textColor.indexOf(' ') + 1);\n               b = textColor.slice(0, textColor.indexOf(')'));\n               var l = rgbToHsl(r, g, b);\n               if (l &gt; 0.7) {\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a&gt;span').css('border-color', 'rgba(0, 0, 0, .35)');\n               }\n               else\n               {\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a&gt;span').css('border-color', 'rgba(255, 255, 255, .35)');\n               }\n             })();\n         \n           function rgbToHsl(r, g, b) {\n               r \/= 255, g \/= 255, b \/= 255;\n               var max = Math.max(r, g, b), min = Math.min(r, g, b);\n               var h, s, l = (max + min) \/ 2;\n         \n               if(max == min){\n                   h = s = 0;\n               }\n               else {\n                   var d = max - min;\n                   s = l &gt; 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n                   switch(max){\n                       case r: h = (g - b) \/ d + (g <b>\n\n         $(document).ready(function () {\n             $(\"#sidebar\").mCustomScrollbar({\n                 theme: \"minimal\"\n             });\n         \n             $('#dismiss, .overlay').on('click', function () {\n                 $('#sidebar').removeClass('active');\n                 $('.overlay').removeClass('active');\n             });\n         \n             $('#sidebarCollapse').on('click', function () {\n                 $('#sidebar').addClass('active');\n                 $('.overlay').addClass('active');\n                 $('.collapse.in').toggleClass('in');\n                 $('a[aria-expanded=true]').attr('aria-expanded', 'false');\n             });\n         });\n      <\/pre>\n\n\n\n<p><strong>FINAL CODE:<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head &gt;\n      &lt;meta charset=\"utf-8\"&gt;\n      &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n      &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n      &lt;title&gt;Sidebar using Bootstrap 4&lt;\/title&gt;\n      &lt;!-- Our Custom CSS --&gt;\n      &lt;link href=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/css\/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\"&gt;\n      &lt;source src=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/js\/bootstrap.min.js\"&gt;&lt;\/source&gt;\n      &lt;link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.7.2\/css\/all.css\"&gt;\n      &lt;link rel='stylesheet' href='https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.0\/css\/bootstrap.min.css?ver=1.1' type='text\/css' media='all' \/&gt;\n      &lt;source type='text\/javascript' src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js?ver=20141010'&gt;&lt;\/source&gt;\n      &lt;style type=\"text\/css\"&gt;\n       @import \"https:\/\/fonts.googleapis.com\/css?family=Poppins:300,400,500,600,700\";\n         body {\n         font-family: 'Poppins', sans-serif;\n         background: #fafafa;\n         }\n         p {\n         font-family: 'Poppins', sans-serif;\n         font-size: 1.1em;\n         font-weight: 300;\n         line-height: 1.7em;\n         color: #999;\n         }\n         a,\n         a:hover,\n         a:focus {\n         color: inherit;\n         text-decoration: none;\n         transition: all 0.3s;\n         }\n         #sidebarCollapse\n         {\n         position: fixed;\n         z-index: 2;\n         }\n         .navbar {\n         padding: 15px 10px;\n         background: #fff;\n         border: none;\n         border-radius: 0;\n         margin-bottom: 40px;\n         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);\n         }\n         .navbar-btn {\n         box-shadow: none;\n         outline: none !important;\n         border: none;\n         }\n         .line {\n         width: 100%;\n         height: 1px;\n         border-bottom: 1px dashed #ddd;\n         margin: 40px 0;\n         }\n         \/* ---------------------------------------------------\n         SIDEBAR STYLE\n         ----------------------------------------------------- *\/\n         #sidebar {\n         width: 250px;\n         position: fixed;\n         top: 0;\n         left: -250px;\n         height: 100vh;\n         z-index: 999;\n         background: #3765a3;\n         color: #fff;\n         transition: all 0.3s;\n         overflow-y: scroll;\n         box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);\n         }\n         #sidebar.active {\n         left: 0;\n         }\n         #dismiss {\n         width: 35px;\n         height: 35px;\n         line-height: 35px;\n         text-align: center;\n         background: #3765a3;\n         position: absolute;\n         top: 10px;\n         right: 10px;\n         cursor: pointer;\n         -webkit-transition: all 0.3s;\n         -o-transition: all 0.3s;\n         transition: all 0.3s;\n         }\n         #dismiss:hover {\n         background: #fff;\n         color: #3765a3;\n         }\n         .overlay {\n         display: none;\n         position: fixed;\n         width: 100vw;\n         height: 100vh;\n         background: rgba(0, 0, 0, 0.7);\n         z-index: 998;\n         opacity: 0;\n         transition: all 0.5s ease-in-out;\n         }\n         .overlay.active {\n         display: block;\n         opacity: 1;\n         }\n         #sidebarmenu,\n         #sidebarmenu ul,\n         #sidebarmenu ul li,\n         #sidebarmenu ul li a {\n         margin: 0;\n         padding: 0;\n         border: 0;\n         list-style: none;\n         line-height: 1;\n         display: block;\n         position: relative;\n         -webkit-box-sizing: border-box;\n         -moz-box-sizing: border-box;\n         box-sizing: border-box;\n         }\n         #sidebarmenu {\n         width: 250px;\n         font-family: Helvetica, Arial, sans-serif;\n         color: #ffffff;\n         }\n         #sidebarmenu ul ul {\n         display: none;\n         }\n         .align-right {\n         float: right;\n         }\n         #sidebarmenu &gt; ul &gt; li &gt; a {\n         padding: 15px 20px;\n         border-left: 1px solid #3765a3;\n         border-right: 1px solid #3765a3;\n         border-top: 1px solid #3765a3;\n         cursor: pointer;\n         z-index: 2;\n         font-size: 14px;\n         font-weight: bold;\n         text-decoration: none;\n         color: #ffffff;\n         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);\n         background: #3765a3;\n         background: -webkit-linear-gradient(#3765a3, #3765a3);\n         background: -moz-linear-gradient(#3765a3, #3765a3);\n         background: -o-linear-gradient(#3765a3, #3765a3);\n         background: -ms-linear-gradient(#3765a3, #3765a3);\n         background: linear-gradient(#3765a3, #3765a3);\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);\n         }\n         #sidebarmenu &gt; ul &gt; li &gt; a:hover,\n         #sidebarmenu &gt; ul &gt; li.active &gt; a,\n         #sidebarmenu &gt; ul &gt; li.open &gt; a {\n         color: #eeeeee;\n         background: #3765a3;\n         background: -webkit-linear-gradient(#3765a3, #3765a3);\n         background: -moz-linear-gradient(#3765a3, #3765a3);\n         background: -o-linear-gradient(#3765a3, #3765a3);\n         background: -ms-linear-gradient(#3765a3, #3765a3);\n         background: linear-gradient(#3765a3, #3765a3);\n         }\n         #sidebarmenu &gt; ul &gt; li.open &gt; a {\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);\n         border-bottom: 1px solid #3765a3;\n         }\n         #sidebarmenu &gt; ul &gt; li:last-child &gt; a,\n         #sidebarmenu &gt; ul &gt; li.last &gt; a {\n         border-bottom: 1px solid #3765a3;\n         }\n         .holder {\n         width: 0;\n         height: 0;\n         position: absolute;\n         top: 0;\n         right: 0;\n         }\n         .holder::after,\n         .holder::before {\n         display: block;\n         position: absolute;\n         content: \"\";\n         width: 6px;\n         height: 6px;\n         right: 20px;\n         z-index: 10;\n         -webkit-transform: rotate(-135deg);\n         -moz-transform: rotate(-135deg);\n         -ms-transform: rotate(-135deg);\n         -o-transform: rotate(-135deg);\n         transform: rotate(-135deg);\n         }\n         .holder::after {\n         top: 17px;\n         border-top: 2px solid #ffffff;\n         border-left: 2px solid #ffffff;\n         }\n         #sidebarmenu &gt; ul &gt; li &gt; a:hover &gt; span::after,\n         #sidebarmenu &gt; ul &gt; li.active &gt; a &gt; span::after,\n         #sidebarmenu &gt; ul &gt; li.open &gt; a &gt; span::after {\n         border-color: #eeeeee;\n         }\n         .holder::before {\n         top: 18px;\n         border-top: 2px solid;\n         border-left: 2px solid;\n         border-top-color: inherit;\n         border-left-color: inherit;\n         }\n         #sidebarmenu ul ul li a {\n         cursor: pointer;\n         border-bottom: 1px solid #32373e;\n         border-left: 1px solid #32373e;\n         border-right: 1px solid #32373e;\n         padding: 10px 20px;\n         z-index: 1;\n         text-decoration: none;\n         font-size: 13px;\n         color: #eeeeee;\n         background: #49505a;\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n         }\n         #sidebarmenu ul ul li:hover &gt; a,\n         #sidebarmenu ul ul li.open &gt; a,\n         #sidebarmenu ul ul li.active &gt; a {\n         background: #424852;\n         color: #ffffff;\n         }\n         #sidebarmenu ul ul li:first-child &gt; a {\n         box-shadow: none;\n         }\n         #sidebarmenu ul ul ul li:first-child &gt; a {\n         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n         }\n         #sidebarmenu ul ul ul li a {\n         padding-left: 30px;\n         }\n         #sidebarmenu &gt; ul &gt; li &gt; ul &gt; li:last-child &gt; a,\n         #sidebarmenu &gt; ul &gt; li &gt; ul &gt; li.last &gt; a {\n         border-bottom: 0;\n         }\n         #sidebarmenu &gt; ul &gt; li &gt; ul &gt; li.open:last-child &gt; a,\n         #sidebarmenu &gt; ul &gt; li &gt; ul &gt; li.last.open &gt; a {\n         border-bottom: 1px solid #32373e;\n         }\n         #sidebarmenu &gt; ul &gt; li &gt; ul &gt; li.open:last-child &gt; ul &gt; li:last-child &gt; a {\n         border-bottom: 0;\n         }\n         #sidebarmenu ul ul li.has-sub &gt; a::after {\n         display: block;\n         position: absolute;\n         content: \"\";\n         width: 5px;\n         height: 5px;\n         right: 20px;\n         z-index: 10;\n         top: 11.5px;\n         border-top: 2px solid #eeeeee;\n         border-left: 2px solid #eeeeee;\n         -webkit-transform: rotate(-135deg);\n         -moz-transform: rotate(-135deg);\n         -ms-transform: rotate(-135deg);\n         -o-transform: rotate(-135deg);\n         transform: rotate(-135deg);\n         }\n         #sidebarmenu ul ul li.active &gt; a::after,\n         #sidebarmenu ul ul li.open &gt; a::after,\n         #sidebarmenu ul ul li &gt; a:hover::after {\n         border-color: #ffffff;\n         }\n      &lt;\/style&gt;\n      \n        \n         \n         ( function( $ ) {\n           $( document ).ready(function() {\n           $('#sidebarmenu li.has-sub&gt;a').on('click', function(){\n               $(this).removeAttr('href');\n               var element = $(this).parent('li');\n               if (element.hasClass('open')) {\n                 element.removeClass('open');\n                 element.find('li').removeClass('open');\n                 element.find('ul').slideUp();\n               }\n               else {\n                 element.addClass('open');\n                 element.children('ul').slideDown();\n                 element.siblings('li').children('ul').slideUp();\n                 element.siblings('li').removeClass('open');\n                 element.siblings('li').find('li').removeClass('open');\n                 element.siblings('li').find('ul').slideUp();\n               }\n             });\n         \n             $('#sidebarmenu&gt;ul&gt;li.has-sub&gt;a').append('<span class=\"holder\"><\/span>');\n         \n             (function getColor() {\n               var r, g, b;\n               var textColor = $('#sidebarmenu').css('color');\n               textColor = textColor.slice(4);\n               r = textColor.slice(0, textColor.indexOf(','));\n               textColor = textColor.slice(textColor.indexOf(' ') + 1);\n               g = textColor.slice(0, textColor.indexOf(','));\n               textColor = textColor.slice(textColor.indexOf(' ') + 1);\n               b = textColor.slice(0, textColor.indexOf(')'));\n               var l = rgbToHsl(r, g, b);\n               if (l &gt; 0.7) {\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a&gt;span').css('border-color', 'rgba(0, 0, 0, .35)');\n               }\n               else\n               {\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');\n                 $('#sidebarmenu&gt;ul&gt;li&gt;a&gt;span').css('border-color', 'rgba(255, 255, 255, .35)');\n               }\n             })();\n         \n           function rgbToHsl(r, g, b) {\n               r \/= 255, g \/= 255, b \/= 255;\n               var max = Math.max(r, g, b), min = Math.min(r, g, b);\n               var h, s, l = (max + min) \/ 2;\n         \n               if(max == min){\n                   h = s = 0;\n               }\n               else {\n                   var d = max - min;\n                   s = l &gt; 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n                   switch(max){\n                       case r: h = (g - b) \/ d + (g <b>\n   &lt;\/head&gt;\n   &lt;body&gt;\n      <div class=\"wrapper\">\n         <!-- Sidebar  -->\n         <nav id=\"sidebar\">\n            <div id=\"dismiss\">\n               <i class=\"fas fa-arrow-left\"><\/i>\n            <\/div>\n            <div class=\"sidebar-header\">\n               <h3>pheonix<\/h3>\n            <\/div>\n            <div id=\"sidebarmenu\" class=\"collapse navbar-collapse\">\n               <ul id=\"menu-main-menu\" class=\"menu\">\n                  <li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub\">\n                     <a href=\"http:\/\/theme-sphere.com\/smart-blog-export\/\"><span>Home *Page*<\/span><\/a>\n                     <ul>\n                        <li><a href=\"#home\">Home<\/a><\/li>\n                        <li><a href=\"#news\">News<\/a><\/li>\n                        <li><a href=\"#contact\">Contact<\/a><\/li>\n                        <li><a href=\"#about\">About<\/a><\/li>\n                     <\/ul>\n                  <\/li>\n                  <li class=\"menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children has-sub\">\n                     <a href=\"http:\/\/localhost\/wordpress-bt\/category\/lifestyle\/\"><span>Life *&amp; Style*<\/span><\/a>\n                     <ul>\n                        <li><a href=\"#home\">Home<\/a><\/li>\n                        <li><a href=\"#news\">News<\/a><\/li>\n                        <li><a href=\"#contact\">Contact<\/a><\/li>\n                        <li><a href=\"#about\">About<\/a><\/li>\n                     <\/ul>\n                  <\/li>\n                  <li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub\">\n                     <a href=\"#\"><span>Our *Features*<\/span><\/a>\n                     <ul>\n                        <li><a href=\"#home\">Home<\/a><\/li>\n                        <li><a href=\"#news\">News<\/a><\/li>\n                        <li><a href=\"#contact\">Contact<\/a><\/li>\n                        <li><a href=\"#about\">About<\/a><\/li>\n                     <\/ul>\n                  <\/li>\n               <\/ul>\n            <\/div>\n         &lt;\/nav&gt;\n         &lt;!-- Page Content  --&gt;\n         &lt;button type=\"button\" id=\"sidebarCollapse\" class=\"btn\"&gt;\n         &lt;i class=\"fas fa-align-left\"&gt;&lt;\/i&gt;\n         &lt;\/button&gt;\n         &lt;button class=\"btn btn-dark d-inline-block d-lg-none ml-auto\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"&gt;\n         &lt;i class=\"fas fa-align-justify\"&gt;&lt;\/i&gt;\n         &lt;\/button&gt;\n      &lt;\/div&gt;\n      &lt;!-- Footer --&gt;\n      <div class=\"overlay\"><\/div>\n\n         <div class=\"container\">\n            <div class=\"text-center center-block\">\n               <p class=\"txt-railway\">Developed by \u00a9<a target=\"_blank\" href=\"https:\/\/www.pheonixsolutions.com\" rel=\"noopener noreferrer\"> www.pheonixsolutions.com<\/a> <\/p>\n            <\/div>\n         &lt;\/div&gt;\n      \n      &lt;!-- jQuery CDN - Slim version (=without AJAX) --&gt;\n      &lt;source src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"&gt;&lt;\/source&gt;\n      &lt;!-- Popper.JS --&gt;\n      &lt;source src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.0\/umd\/popper.min.js\" integrity=\"sha384-cs\/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY\/\/20VyM2taTB4QvJ\" crossorigin=\"anonymous\"&gt;&lt;\/source&gt;\n      &lt;!-- jQuery Custom Scroller CDN --&gt;\n      &lt;source src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/malihu-custom-scrollbar-plugin\/3.1.5\/jquery.mCustomScrollbar.concat.min.js\"&gt;&lt;\/source&gt;\n      \n         $(document).ready(function () {\n             $(\"#sidebar\").mCustomScrollbar({\n                 theme: \"minimal\"\n             });\n         \n             $('#dismiss, .overlay').on('click', function () {\n                 $('#sidebar').removeClass('active');\n                 $('.overlay').removeClass('active');\n             });\n         \n             $('#sidebarCollapse').on('click', function () {\n                 $('#sidebar').addClass('active');\n                 $('.overlay').addClass('active');\n                 $('.collapse.in').toggleClass('in');\n                 $('a[aria-expanded=true]').attr('aria-expanded', 'false');\n             });\n         });\n      \n     \n   &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p><strong>OUTPUT Screen <\/strong><br>The expected output is achieved.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png\" alt=\"\" class=\"wp-image-3674\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-300x145.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-768x372.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"337\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.38-PM-1024x337.png\" alt=\"\" class=\"wp-image-3672\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.38-PM-1024x337.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.38-PM-300x99.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.38-PM-768x253.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.38-PM.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"336\" src=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.46-PM-1024x336.png\" alt=\"\" class=\"wp-image-3673\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.46-PM-1024x336.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.46-PM-300x99.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.46-PM-768x252.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-6.17.46-PM.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Thanks for using <a href=\"https:\/\/pheonixsolutions.com\">pheonix solutions<\/a>.<\/p>\n\n\n\n<p>You find this tutorial helpful? Share with your friends to keep it alive. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create accordion menu with sidebar hamburger menu DATE POSTED: 27\/02\/2019 In this post we will explain how to create the accordion menu with sidebar hamburger menu. The Code STEP 1: In the header of the page we refer to stylesheet . This reference was made with the &lt;link> tag as&hellip; <a href=\"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/\" class=\"more-link read-more\" rel=\"bookmark\">Continue Reading <span class=\"screen-reader-text\">Create accordion menu with sidebar hamburger menu<\/span><i class=\"fa fa-arrow-right\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[513,484,351,287,352],"tags":[496,495,485],"class_list":{"0":"post-3663","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-bootstrap","7":"category-html-css","8":"category-javascript","9":"category-javascriptjquery","10":"category-jquery","11":"tag-css","12":"tag-html","13":"tag-html-css","14":"h-entry","16":"h-as-article"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Create accordion menu with sidebar hamburger menu DATE POSTED: 27\/02\/2019 In this post we will explain how to create the accordion menu with sidebar hamburger menu. The Code STEP 1: In the header of the page we refer to stylesheet . This reference was made with the &lt;link&gt; tag as&hellip; Continue Reading Create accordion menu with sidebar hamburger menu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-28T06:55:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-04T06:47:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\"},\"headline\":\"Create accordion menu with sidebar hamburger menu\",\"datePublished\":\"2019-02-28T06:55:08+00:00\",\"dateModified\":\"2019-03-04T06:47:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/\"},\"wordCount\":110,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png\",\"keywords\":[\"CSS\",\"HTML\",\"HTML CSS\"],\"articleSection\":[\"Bootstrap\",\"HTML CSS\",\"Javascript\",\"Javascript\\\/jquery\",\"Jquery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png\",\"datePublished\":\"2019-02-28T06:55:08+00:00\",\"dateModified\":\"2019-03-04T06:47:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png\",\"contentUrl\":\"https:\\\/\\\/blog.pheonixsolutions.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/create-accordion-menu-with-sidebar-hamburger-menu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create accordion menu with sidebar hamburger menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\\\/\\\/blog.pheonixsolutions.com\"],\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","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:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Create accordion menu with sidebar hamburger menu DATE POSTED: 27\/02\/2019 In this post we will explain how to create the accordion menu with sidebar hamburger menu. The Code STEP 1: In the header of the page we refer to stylesheet . This reference was made with the &lt;link> tag as&hellip; Continue Reading Create accordion menu with sidebar hamburger menu","og_url":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2019-02-28T06:55:08+00:00","article_modified_time":"2019-03-04T06:47:58+00:00","og_image":[{"url":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"admin","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/"},"author":{"name":"admin","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503"},"headline":"Create accordion menu with sidebar hamburger menu","datePublished":"2019-02-28T06:55:08+00:00","dateModified":"2019-03-04T06:47:58+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/"},"wordCount":110,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png","keywords":["CSS","HTML","HTML CSS"],"articleSection":["Bootstrap","HTML CSS","Javascript","Javascript\/jquery","Jquery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/","url":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#primaryimage"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png","datePublished":"2019-02-28T06:55:08+00:00","dateModified":"2019-03-04T06:47:58+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#primaryimage","url":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png","contentUrl":"https:\/\/blog.pheonixsolutions.com\/wp-content\/uploads\/2019\/02\/Screenshot-2019-02-27-at-7.12.10-PM-1024x496.png"},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/create-accordion-menu-with-sidebar-hamburger-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create accordion menu with sidebar hamburger menu"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09bacc0294abee1322a23ab4bc6a0330dd4cb4df707dc9d0b0efeba6c109608b?s=96&r=g","caption":"admin"},"sameAs":["http:\/\/blog.pheonixsolutions.com"],"url":"https:\/\/pheonixsolutions.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-X5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3663"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3663\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}