{"id":1902,"date":"2025-03-17T12:56:34","date_gmt":"2025-03-17T12:56:34","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=1902"},"modified":"2025-03-17T12:56:36","modified_gmt":"2025-03-17T12:56:36","slug":"how-to-load-common-menu-to-bulk-html-websites","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/how-to-load-common-menu-to-bulk-html-websites\/","title":{"rendered":"How to load Common Menu to bulk html websites"},"content":{"rendered":"\n

You can simplify your menu management across thousands of static HTML pages by using JavaScript<\/strong> or server-side includes<\/strong>. Here are a few methods:<\/p>\n\n\n\n

\n\n\n\n

Method 1: Use JavaScript to Load a Common Menu<\/strong><\/h3>\n\n\n\n

You can create a separate file (menu.html<\/code>) that contains your navigation menu and use JavaScript to include it in all your pages.<\/p>\n\n\n\n

Steps:<\/strong><\/h4>\n\n\n\n
    \n
  1. Create a file named menu.html<\/code><\/strong> and add the menu code inside it: <ul> <li><a href=\"\/about-us\/about-us.html\" target=\"_blank\">About Us<\/a><\/li> <li><a href=\"\/about-us\/vision.html\" target=\"_blank\">Vision<\/a><\/li> <li><a href=\"\/about-us\/ecare-planet-technology.html\" target=\"_blank\">eCarePlanet Technology<\/a><\/li> <li><a href=\"\/contact\/join-hospital-network.html\" target=\"_blank\">Join Hospital Network<\/a><\/li> <li><a href=\"\/about-us\/disclaimer.html\" target=\"_blank\">Disclaimer<\/a><\/li> <li><a href=\"\/about-us\/services-easy.html\" target=\"_blank\">Simple & Easy Process<\/a><\/li> <li><a href=\"\/about-us\/services-full-service.html\" target=\"_blank\">Services<\/a><\/li> <li><a href=\"\/about-us\/services-quality.html\" target=\"_blank\">Services Quality<\/a><\/li> <li><a href=\"\/about-us\/services-savings.html\" target=\"_blank\">Services Savings<\/a><\/li> <li><a href=\"\/about-us\/services-guarantee.html\" target=\"_blank\">Services Guarantee<\/a><\/li> <\/ul><\/code><\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    1. Include it in all HTML pages using JavaScript:<\/strong> Add this code inside the <body><\/code> where the menu should appear: <div id=\"menu-placeholder\"><\/div> <script> fetch('\/menu.html') .then(response => response.text()) .then(data => document.getElementById('menu-placeholder').innerHTML = data) .catch(error => console.error('Error loading the menu:', error)); <\/script><\/code><\/li>\n<\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      \u2705 Advantage<\/strong>: Any updates made in menu.html<\/code> will automatically reflect on all pages.<\/p>\n\n\n\n

      \n\n\n\n

      To fix the href path issue<\/strong> when including the same menu across different directories, you should use absolute paths<\/strong> or base URL settings<\/strong>. Here are two approaches:<\/p>\n\n\n\n

      \n\n\n\n

      Solution 1: Use Absolute Paths<\/strong><\/h3>\n\n\n\n

      Instead of using relative paths<\/strong>, use absolute paths<\/strong> based on the root (\/<\/code>).<\/p>\n\n\n\n

      Example:<\/strong> Change your menu links like this:<\/p>\n\n\n\n

      <ul>\n    <li><a href=\"\/about-us\/about-us.html\" target=\"_blank\">About Us<\/a><\/li>\n    <li><a href=\"\/about-us\/vision.html\" target=\"_blank\">Vision<\/a><\/li>\n    <li><a href=\"\/about-us\/ecare-planet-technology.html\" target=\"_blank\">eCarePlanet Technology<\/a><\/li>\n    <li><a href=\"\/contact\/join-hospital-network.html\" target=\"_blank\">Join Hospital Network<\/a><\/li>\n    <li><a href=\"\/about-us\/disclaimer.html\" target=\"_blank\">Disclaimer<\/a><\/li>\n    <li><a href=\"\/about-us\/services-easy.html\" target=\"_blank\">Simple & Easy Process<\/a><\/li>\n    <li><a href=\"\/about-us\/services-full-service.html\" target=\"_blank\">Services<\/a><\/li>\n    <li><a href=\"\/about-us\/services-quality.html\" target=\"_blank\">Services Quality<\/a><\/li>\n    <li><a href=\"\/about-us\/services-savings.html\" target=\"_blank\">Services Savings<\/a><\/li>\n    <li><a href=\"\/about-us\/services-guarantee.html\" target=\"_blank\">Services Guarantee<\/a><\/li>\n<\/ul>\n<\/code><\/pre>\n\n\n\n
      \u2705 Why?<\/strong><\/p>\n\n\n\n
        \n
      • Absolute paths (\/about-us\/about-us.html<\/code>) will always resolve from the root domain, no matter where the page is located.<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        Solution 2: Use a <base><\/code> Tag in <head><\/code><\/strong><\/h3>\n\n\n\n
        If you prefer to use relative paths<\/strong>, you can define a base URL<\/strong> in the <head><\/code> of every page.<\/p>\n\n\n\n
        Steps:<\/strong><\/h4>\n\n\n\n
          \n
        1. Add this in the <head><\/code> section of your HTML files: <base href=\"https:\/\/www.yourwebsite.com\/\"><\/code><\/li>\n\n\n\n
        2. Keep your menu links relative<\/strong>, but they will now always refer to the root: <ul> <li><a href=\"about-us\/about-us.html\" target=\"_blank\">About Us<\/a><\/li> <li><a href=\"about-us\/vision.html\" target=\"_blank\">Vision<\/a><\/li> <\/ul><\/code><\/li>\n<\/ol>\n\n\n\n
          \u2705 Why?<\/strong><\/p>\n\n\n\n
            \n
          • The browser will automatically resolve all links based on the <base><\/code> URL<\/strong>, even if you’re in a subdirectory.<\/li>\n<\/ul>\n\n\n\n
            \n\n\n\n
            Final Recommendation<\/strong><\/h3>\n\n\n\n
              \n
            • If your website is static and follows a strict folder structure<\/strong>, use absolute paths (\/about-us\/about-us.html<\/code>)<\/strong>.<\/li>\n\n\n\n
            • If you have a dynamic or multi-domain setup<\/strong>, use the <base><\/code> tag<\/strong> to simplify URL management.<\/li>\n<\/ul>\n\n\n\n
              Either of these fixes will ensure that your navigation menu works correctly across all 1000+ pages. \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"
              You can simplify your menu management across thousands of static HTML pages by using JavaScript or server-side includes. Here are<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1902","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/1902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=1902"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/1902\/revisions"}],"predecessor-version":[{"id":1905,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1905"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=1902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=1902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=1902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}