{"id":1658,"date":"2017-06-19T18:04:24","date_gmt":"2017-06-19T12:34:24","guid":{"rendered":"https:\/\/blog.pheonixsolutions.com\/?p=1658"},"modified":"2017-06-21T13:25:26","modified_gmt":"2017-06-21T07:55:26","slug":"make-active-click-menu","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/","title":{"rendered":"Make the menu to be Active when click menu"},"content":{"rendered":"

Posted Date:19-06-2017<\/strong><\/p>\n

In this post we will explain Make the <li class> to be Active when click menu<\/p>\n

Step 1: Include jQuery Plugin\u00a0necessary \u00a0jquery files.<\/p>\n

<source src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"><\/source >\r\n<source\u00a0src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js\" type=\"text\/javascript\"><\/source\u00a0>\r\n <source\u00a0src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js\" type=\"text\/javascript\"><\/source\u00a0>\r\n\r\n\r\n<\/pre>\n
Step 2:Add the following jquery script code for dynamic active class<\/p>\n
  \r\n          var url = window.location.href;\r\n       \/\/ for sidebar menu entirely but not cover treeview\r\n       $('ul.sidebar-menu a').filter(function() {\r\n         return this.href == url;\r\n       }).parent().addClass('active');\r\n\r\n       \/\/ for treeview\r\n       $('ul.treeview-menu a').filter(function() {\r\n         return this.href == url;\r\n       }).closest('.treeview').addClass('active');\r\n<\/pre>\n
Step 3:Create sidebar menu using following code,Every each link you can create new file and give link based on <a>tag<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Sidebar Menu<\/title>\r\n <head>\r\n <meta charset=\"UTF-8\">\r\n <title>admin<\/title>\r\n <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>\r\n <!-- Bootstrap 3.3.4 -->\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/css\/bootstrap.css\" rel=\"stylesheet\" type=\"text\/css\" \/> \r\n <!-- FontAwesome 4.7.0 -->\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <!-- Ionicons 2.0.0 -->\r\n <link href=\"https:\/\/code.ionicframework.com\/ionicons\/2.0.1\/css\/ionicons.min.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <!-- Theme style -->\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/css\/AdminLTE.min.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <!-- AdminLTE Skins. Choose a skin from the css\/skins \r\n folder instead of downloading all of them to reduce the load. -->\r\n <!-- <link href=\"http:\/\/localhost:7777\/ci-newadmin\/assets\/dist\/css\/skins\/_all-skins.min.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n --> \r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/css\/skins\/skin-blue.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n \r\n <!-- jQuery 2.1.4 -->\r\n <source src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"><\/source>\r\n <\/head>\r\n<\/head>\r\n<body class=\"sidebar-mini skin-blue\">\r\n<aside class=\"main-sidebar\">\r\n <section class=\"sidebar\">\r\n<!-- sidebar menu: : style can be found in sidebar.less -->\r\n <ul class=\"sidebar-menu\">\r\n <li class=\"header\">MAIN NAVIGATION<\/li>\r\n <li class=\"active treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-dashboard\"><\/i> <span>Dashboard<\/span> <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li class=\"active\"><a href=\"index.html\"><i class=\"fa fa-circle-o\"><\/i> Dashboard v1<\/a><\/li>\r\n <li><a href=\"index2.html\"><i class=\"fa fa-circle-o\"><\/i> Dashboard v2<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-files-o\"><\/i>\r\n <span>Layout Options<\/span>\r\n <span class=\"label label-primary pull-right\">4<\/span>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"pages\/layout\/top-nav.html\"><i class=\"fa fa-circle-o\"><\/i> Top Navigation<\/a><\/li>\r\n <li><a href=\"pages\/layout\/boxed.html\"><i class=\"fa fa-circle-o\"><\/i> Boxed<\/a><\/li>\r\n <li><a href=\"pages\/layout\/fixed.html\"><i class=\"fa fa-circle-o\"><\/i> Fixed<\/a><\/li>\r\n <li><a href=\"pages\/layout\/collapsed-sidebar.html\"><i class=\"fa fa-circle-o\"><\/i> Collapsed Sidebar<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href=\"pages\/widgets.html\">\r\n <i class=\"fa fa-th\"><\/i> <span>Widgets<\/span>\r\n <small class=\"label pull-right bg-green\">new<\/small>\r\n <\/a>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-pie-chart\"><\/i>\r\n <span>Charts<\/span>\r\n <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"pages\/charts\/chartjs.html\"><i class=\"fa fa-circle-o\"><\/i> ChartJS<\/a><\/li>\r\n <li><a href=\"pages\/charts\/morris.html\"><i class=\"fa fa-circle-o\"><\/i> Morris<\/a><\/li>\r\n <li><a href=\"pages\/charts\/flot.html\"><i class=\"fa fa-circle-o\"><\/i> Flot<\/a><\/li>\r\n <li><a href=\"pages\/charts\/inline.html\"><i class=\"fa fa-circle-o\"><\/i> Inline charts<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-laptop\"><\/i>\r\n <span>UI Elements<\/span>\r\n <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"pages\/UI\/general.html\"><i class=\"fa fa-circle-o\"><\/i> General<\/a><\/li>\r\n <li><a href=\"pages\/UI\/icons.html\"><i class=\"fa fa-circle-o\"><\/i> Icons<\/a><\/li>\r\n <li><a href=\"pages\/UI\/buttons.html\"><i class=\"fa fa-circle-o\"><\/i> Buttons<\/a><\/li>\r\n <li><a href=\"pages\/UI\/sliders.html\"><i class=\"fa fa-circle-o\"><\/i> Sliders<\/a><\/li>\r\n <li><a href=\"pages\/UI\/timeline.html\"><i class=\"fa fa-circle-o\"><\/i> Timeline<\/a><\/li>\r\n <li><a href=\"pages\/UI\/modals.html\"><i class=\"fa fa-circle-o\"><\/i> Modals<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-edit\"><\/i> <span>Forms<\/span>\r\n <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"pages\/forms\/general.html\"><i class=\"fa fa-circle-o\"><\/i> General Elements<\/a><\/li>\r\n <li><a href=\"pages\/forms\/advanced.html\"><i class=\"fa fa-circle-o\"><\/i> Advanced Elements<\/a><\/li>\r\n <li><a href=\"pages\/forms\/editors.html\"><i class=\"fa fa-circle-o\"><\/i> Editors<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-table\"><\/i> <span>Tables<\/span>\r\n <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"pages\/tables\/simple.html\"><i class=\"fa fa-circle-o\"><\/i> Simple tables<\/a><\/li>\r\n <li><a href=\"pages\/tables\/data.html\"><i class=\"fa fa-circle-o\"><\/i> Data tables<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href=\"pages\/calendar.html\">\r\n <i class=\"fa fa-calendar\"><\/i> <span>Calendar<\/span>\r\n <small class=\"label pull-right bg-red\">3<\/small>\r\n <\/a>\r\n <\/li>\r\n <li>\r\n <a href=\"pages\/mailbox\/mailbox.html\">\r\n <i class=\"fa fa-envelope\"><\/i> <span>Mailbox<\/span>\r\n <small class=\"label pull-right bg-yellow\">12<\/small>\r\n <\/a>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-folder\"><\/i> <span>Examples<\/span>\r\n <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"pages\/examples\/invoice.html\"><i class=\"fa fa-circle-o\"><\/i> Invoice<\/a><\/li>\r\n <li><a href=\"pages\/examples\/profile.html\"><i class=\"fa fa-circle-o\"><\/i> Profile<\/a><\/li>\r\n <li><a href=\"pages\/examples\/login.html\"><i class=\"fa fa-circle-o\"><\/i> Login<\/a><\/li>\r\n <li><a href=\"pages\/examples\/register.html\"><i class=\"fa fa-circle-o\"><\/i> Register<\/a><\/li>\r\n <li><a href=\"pages\/examples\/lockscreen.html\"><i class=\"fa fa-circle-o\"><\/i> Lockscreen<\/a><\/li>\r\n <li><a href=\"pages\/examples\/404.html\"><i class=\"fa fa-circle-o\"><\/i> 404 Error<\/a><\/li>\r\n <li><a href=\"pages\/examples\/500.html\"><i class=\"fa fa-circle-o\"><\/i> 500 Error<\/a><\/li>\r\n <li><a href=\"pages\/examples\/blank.html\"><i class=\"fa fa-circle-o\"><\/i> Blank Page<\/a><\/li>\r\n <li><a href=\"pages\/examples\/pace.html\"><i class=\"fa fa-circle-o\"><\/i> Pace Page<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class=\"treeview\">\r\n <a href=\"#\">\r\n <i class=\"fa fa-share\"><\/i> <span>Multilevel<\/span>\r\n <i class=\"fa fa-angle-left pull-right\"><\/i>\r\n <\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level One<\/a><\/li>\r\n <li>\r\n <a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level One <i class=\"fa fa-angle-left pull-right\"><\/i><\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level Two<\/a><\/li>\r\n <li>\r\n <a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level Two <i class=\"fa fa-angle-left pull-right\"><\/i><\/a>\r\n <ul class=\"treeview-menu\">\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level Three<\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o\"><\/i> Level One<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"documentation\/index.html\"><i class=\"fa fa-book\"><\/i> <span>Documentation<\/span><\/a><\/li>\r\n <li class=\"header\">LABELS<\/li>\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o text-red\"><\/i> <span>Important<\/span><\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o text-yellow\"><\/i> <span>Warning<\/span><\/a><\/li>\r\n <li><a href=\"#\"><i class=\"fa fa-circle-o text-aqua\"><\/i> <span>Information<\/span><\/a><\/li>\r\n <\/ul>\r\n <\/section>\r\n <!-- \/.sidebar -->\r\n <\/aside>\r\n <div class=\"container\" style=\"padding:10px\">\r\n \r\n <!-- Bootstrap 3.3.2 JS -->\r\n <source src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js\" type=\"text\/javascript\"><\/source>\r\n <source src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js\" type=\"text\/javascript\"><\/source>\r\n \r\n <source type=\"text\/javascript\">\r\n \r\n var url = window.location.href;\r\n \/\/ for sidebar menu entirely but not cover treeview\r\n $('ul.sidebar-menu a').filter(function() {\r\n return this.href == url;\r\n }).parent().addClass('active');\r\n\r\n \/\/ for treeview\r\n $('ul.treeview-menu a').filter(function() {\r\n return this.href == url;\r\n }).closest('.treeview').addClass('active');\r\n <\/source>\r\n<\/body>\r\n<\/html><\/pre>\n
<\/div>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Posted Date:19-06-2017 In this post we will explain Make the <li class> to be Active when click menu Step 1: Include jQuery Plugin\u00a0necessary \u00a0jquery files. <source src=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js”><\/source > <source\u00a0src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js” type=”text\/javascript”><\/source\u00a0> <source\u00a0src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js” type=”text\/javascript”><\/source\u00a0> Step 2:Add the following jquery script code for dynamic active class var url = window.location.href; \/\/ for sidebar… Continue Reading Make the menu to be Active when click menu<\/span><\/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":[340,221],"tags":[341,350,273],"class_list":{"0":"post-1658","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-codeigniter","7":"category-php","8":"tag-codeigniter","9":"tag-javascriptjquery","10":"tag-php","11":"h-entry","13":"h-as-article"},"yoast_head":"\nPheonix 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\/make-active-click-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=\"Posted Date:19-06-2017 In this post we will explain Make the <li class> to be Active when click menu Step 1: Include jQuery Plugin\u00a0necessary \u00a0jquery files. <source src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js"><\/source > <source\u00a0src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js" type="text\/javascript"><\/source\u00a0> <source\u00a0src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js" type="text\/javascript"><\/source\u00a0> Step 2:Add the following jquery script code for dynamic active class var url = window.location.href; \/\/ for sidebar… Continue Reading Make the menu to be Active when click menu\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/make-active-click-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=\"2017-06-19T12:34:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-21T07:55:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3837\" \/>\n\t<meta property=\"og:image:height\" content=\"2540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/0ffa33d73c869faec2d50e79c24e3503\"},\"headline\":\"Make the menu to be Active when click menu\",\"datePublished\":\"2017-06-19T12:34:24+00:00\",\"dateModified\":\"2017-06-21T07:55:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/\"},\"wordCount\":75,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"keywords\":[\"codeigniter\",\"Javascript\\\/jquery\",\"php\"],\"articleSection\":[\"Codeigniter\",\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"datePublished\":\"2017-06-19T12:34:24+00:00\",\"dateModified\":\"2017-06-21T07:55:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/make-active-click-menu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make the menu to be Active when click 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\/make-active-click-menu\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Posted Date:19-06-2017 In this post we will explain Make the <li class> to be Active when click menu Step 1: Include jQuery Plugin\u00a0necessary \u00a0jquery files. <source src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js\"><\/source > <source\u00a0src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js\" type=\"text\/javascript\"><\/source\u00a0> <source\u00a0src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js\" type=\"text\/javascript\"><\/source\u00a0> Step 2:Add the following jquery script code for dynamic active class var url = window.location.href; \/\/ for sidebar… Continue Reading Make the menu to be Active when click menu","og_url":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2017-06-19T12:34:24+00:00","article_modified_time":"2017-06-21T07:55:26+00:00","og_image":[{"width":3837,"height":2540,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"admin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/"},"author":{"name":"admin","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/0ffa33d73c869faec2d50e79c24e3503"},"headline":"Make the menu to be Active when click menu","datePublished":"2017-06-19T12:34:24+00:00","dateModified":"2017-06-21T07:55:26+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/"},"wordCount":75,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"keywords":["codeigniter","Javascript\/jquery","php"],"articleSection":["Codeigniter","PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/","url":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"datePublished":"2017-06-19T12:34:24+00:00","dateModified":"2017-06-21T07:55:26+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/make-active-click-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make the menu to be Active when click 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-qK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1658","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=1658"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1658\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}