{"id":10253,"date":"2024-01-18T18:18:00","date_gmt":"2024-01-18T18:18:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10253"},"modified":"2024-01-22T16:19:01","modified_gmt":"2024-01-22T11:19:01","slug":"javascript-horizontal-menu-with-submenu-on-click","status":"publish","type":"post","link":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/","title":{"rendered":"JavaScript Horizontal Menu with Submenu on Click"},"content":{"rendered":"

This JavaScript code snippet helps you to create a horizontal menu with submenu on the click event. When clicked, it shows related submenus. The code toggles the visibility of submenu items when their respective menu items are clicked. It’s useful for organizing and displaying content categories on a website.<\/p>\n

You can use this code on websites needing a clean, clickable menu. It’s great for organizing content and providing a seamless user experience.<\/p>\n

How to Create Horizontal Menu with Submenu on Click<\/h2>\n

1. First of all, load the Google Fonts and Font Awesome CSS<\/a> by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto&display=swap\" rel=\"stylesheet\">\r\n<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.9.0\/css\/all.min.css'><\/pre>\n
2. Create a menu structure with list items (<li><\/code>) for main menu items and their respective submenus.<\/p>\n
<nav class=\"navigationWrapper\">\r\n  <div class=\"logoWrapper\">\r\n    <span class=\"stylish\">Stylish<\/span>\r\n    <span class=\"logo\">Logo<\/span>\r\n  <\/div>\r\n  <ul class=\"navigation\">\r\n    <li class=\"parent\"><a class=\"link\" href=\"#\">Home<\/a><\/li>\r\n    <li class=\"parent\"><a class=\"link\" href=\"#\">About<\/a><\/li>\r\n    <li class=\"parent\" id=\"clients\">\r\n      <a class=\"link\" href=\"#\"><i class=\"fas fa-minus\"><\/i> Clients <i class=\"fas fa-plus\"><\/i><\/a>\r\n      <ul class=\"subnavigation\">\r\n        <li><a class=\"link\" href=\"#\">Burger King<\/a><\/li>\r\n        <li><a class=\"link\" href=\"#\">Southwest Airlines<\/a><\/li>\r\n        <li><a class=\"link\" href=\"#\">Levi Strauss<\/a><\/li>\r\n      <\/ul>\r\n    <\/li>\r\n    <li class=\"parent\" id=\"services\">\r\n      <a class=\"link\" href=\"#\"><i class=\"fas fa-minus\"><\/i> Services <i class=\"fas fa-plus\"><\/i><\/a>\r\n      <ul class=\"subnavigation\">\r\n        <li><a class=\"link\" href=\"#\">Print Design<\/a><\/li>\r\n        <li><a class=\"link\" href=\"#\">Web Design<\/a><\/li>\r\n        <li><a class=\"link\" href=\"#\">Mobile App Development<\/a><\/li>\r\n      <\/ul>\r\n    <\/li>\r\n    <li class=\"parent\"><a class=\"link\" href=\"#\">Contact<\/a><\/li>\r\n  <\/ul>\r\n<\/nav>\r\n\r\n<a href=\"https:\/\/dribbble.com\/shots\/5844983-Sub-Nav-Interaction-Concept\" class=\"signature\" target=\"_blank\">Designed by Carson Monroe<\/a><\/pre>\n
3. Use the following CSS or customize it to suit your website’s design. This CSS styles the menu, submenus, and their appearance.<\/p>\n
body {\r\n  font-family: \"Roboto\", sans-serif;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100vh;\r\n  background: linear-gradient(45deg, #ea4f4c 0%, #6d0019 100%);\r\n}\r\n\r\nbody .signature {\r\n  font-style: italic;\r\n  font-size: 12px;\r\n  color: #212121;\r\n  padding-top: 15px;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\nbody .signature:hover {\r\n  color: white;\r\n}\r\n\r\n.navigationWrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 20px;\r\n  background-color: #222;\r\n  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);\r\n  color: white;\r\n  text-transform: uppercase;\r\n  overflow: hidden;\r\n  width: 600px;\r\n}\r\n.navigationWrapper .logoWrapper {\r\n  display: flex;\r\n}\r\n.navigationWrapper .logoWrapper .stylish {\r\n  font-weight: bold;\r\n}\r\n.navigationWrapper .logoWrapper .logo {\r\n  padding-left: 4px;\r\n  color: #ea4f4c;\r\n}\r\n.navigationWrapper .navigation {\r\n  display: flex;\r\n  list-style-type: none;\r\n}\r\n.navigationWrapper .navigation li {\r\n  opacity: 1;\r\n  list-style-type: none;\r\n  color: white;\r\n  text-decoration: none;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n.navigationWrapper .navigation .parent {\r\n  padding: 0 10px;\r\n  cursor: pointer;\r\n}\r\n.navigationWrapper .navigation .parent .link {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  text-decoration: none;\r\n  transition: all 0.3s ease-in-out;\r\n  color: white;\r\n}\r\n.navigationWrapper .navigation .parent .link:hover {\r\n  color: #ea4f4c;\r\n}\r\n.navigationWrapper .navigation .parent .link .fa-minus {\r\n  opacity: 0;\r\n  transition: all 0.3s ease-in-out;\r\n  position: absolute;\r\n  left: -16px;\r\n  top: 3px;\r\n}\r\n.navigationWrapper .navigation .parent .link .fa-plus {\r\n  opacity: 1;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n.navigationWrapper .navigation .parent .link .fas {\r\n  color: #ea4f4c;\r\n  margin: -2px 4px 0;\r\n  font-size: 10px;\r\n  transition: all 0.3s ease-in-out;\r\n}\r\n.navigationWrapper .navigation .subnavigation {\r\n  display: none;\r\n  list-style-type: none;\r\n  width: 500px;\r\n  position: absolute;\r\n  top: 40%;\r\n  left: 25%;\r\n  margin: auto;\r\n  transition: all 0.3s ease-in-out;\r\n  background-color: #222;\r\n}\r\n.navigationWrapper .navigation .subnavigation li a {\r\n  font-size: 17px;\r\n  padding: 0 5px;\r\n}\r\n\r\n.active.parent {\r\n  transform: translate(-40px, -25px);\r\n}\r\n.active.parent .link {\r\n  font-size: 12px;\r\n}\r\n.active.parent .link .fa-minus {\r\n  opacity: 1 !important;\r\n  font-size: 8px;\r\n}\r\n.active.parent .link .fa-plus {\r\n  opacity: 0 !important;\r\n}\r\n.active.parent .subnavigation {\r\n  display: flex;\r\n}\r\n\r\n.active#clients .subnavigation {\r\n  transform: translate(-150px, 17px);\r\n}\r\n\r\n.active#services .subnavigation {\r\n  transform: translate(-290px, 17px);\r\n}\r\n\r\n.invisible {\r\n  opacity: 0 !important;\r\n  transform: translate(50px, 0);\r\n}<\/pre>\n
4. Load the jQuery<\/a> by adding the following script before closing the body tag:<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js'><\/script><\/pre>\n
5. Finally, add the following JavaScript code to make the menu interactive. This code uses event listeners to toggle the visibility of submenus when their respective main menu items are clicked.<\/p>\n
var clients = document.getElementById('clients');\r\nvar services = document.getElementById('services');\r\n\r\nclients.addEventListener('click', function() {\r\n  $(clients).toggleClass(\"active\");\r\n  $(\".parent:not(#clients)\").toggleClass(\"invisible\");\r\n}, false);\r\n\r\nservices.addEventListener('click', function() {\r\n  $(services).toggleClass(\"active\");\r\n  $(\".parent:not(#services)\").toggleClass(\"invisible\");\r\n}, false);<\/pre>\n
That’s all! hopefully, you have successfully created a JavaScript horizontal menu with submenu on click. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code snippet helps you to create a horizontal menu with submenu on the click event. When clicked, it…<\/p>\n","protected":false},"author":1,"featured_media":10260,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[38],"tags":[15],"class_list":["post-10253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-menu","tag-horizontal-menu"],"acf":[],"yoast_head":"\nJavaScript Horizontal Menu with Submenu on Click — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Horizontal Menu with Submenu on Click. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Horizontal Menu with Submenu on Click — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Horizontal Menu with Submenu on Click. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T18:18:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:19:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Horizontal Menu with Submenu on Click\",\"datePublished\":\"2024-01-18T18:18:00+00:00\",\"dateModified\":\"2024-01-22T11:19:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\"},\"wordCount\":223,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png\",\"keywords\":[\"Horizontal Menu\"],\"articleSection\":[\"Menu & Nav\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\",\"url\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\",\"name\":\"JavaScript Horizontal Menu with Submenu on Click — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png\",\"datePublished\":\"2024-01-18T18:18:00+00:00\",\"dateModified\":\"2024-01-22T11:19:01+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Horizontal Menu with Submenu on Click. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Horizontal Menu with Submenu on Click\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menu & Nav\",\"item\":\"https:\/\/codehim.com\/category\/menu\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Horizontal Menu with Submenu on Click\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Horizontal Menu with Submenu on Click — CodeHim","description":"Here is a free code snippet to create a JavaScript Horizontal Menu with Submenu on Click. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Horizontal Menu with Submenu on Click — CodeHim","og_description":"Here is a free code snippet to create a JavaScript Horizontal Menu with Submenu on Click. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-18T18:18:00+00:00","article_modified_time":"2024-01-22T11:19:01+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Horizontal Menu with Submenu on Click","datePublished":"2024-01-18T18:18:00+00:00","dateModified":"2024-01-22T11:19:01+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/"},"wordCount":223,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png","keywords":["Horizontal Menu"],"articleSection":["Menu & Nav"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/","url":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/","name":"JavaScript Horizontal Menu with Submenu on Click — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png","datePublished":"2024-01-18T18:18:00+00:00","dateModified":"2024-01-22T11:19:01+00:00","description":"Here is a free code snippet to create a JavaScript Horizontal Menu with Submenu on Click. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/JavaScript-Horizontal-Menu-with-Submenu-on-Click.png","width":1280,"height":960,"caption":"JavaScript Horizontal Menu with Submenu on Click"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/menu\/javascript-horizontal-menu-with-submenu-on-click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Menu & Nav","item":"https:\/\/codehim.com\/category\/menu\/"},{"@type":"ListItem","position":3,"name":"JavaScript Horizontal Menu with Submenu on Click"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1269,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10253"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10260"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}