{"id":3663,"date":"2019-02-28T12:25:08","date_gmt":"2019-02-28T06:55:08","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><strong>STEP 2:<\/strong>You can add the following style code into your &lt;head> tags.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\"><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\/\" target=\"_blank\" rel=\"noopener\"><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\/\" target=\"_blank\" rel=\"noopener\"><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 class=\"wp-block-paragraph\"><strong>OUTPUT Screen <\/strong><br>The expected output is achieved.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/pheonixsolutions.com\/blog\/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=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"337\" src=\"https:\/\/pheonixsolutions.com\/blog\/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=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"336\" src=\"https:\/\/pheonixsolutions.com\/blog\/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=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using <a href=\"https:\/\/pheonixsolutions.com\">pheonix solutions<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[496,495,485],"class_list":["post-3663","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-css","tag-html","tag-html-css","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-X5","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_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}]}}