$100 Website Offer

Get your personal website + domain for just $100.

Limited Time Offer!

Claim Your Website Now

How to load Common Menu to bulk html websites

You can simplify your menu management across thousands of static HTML pages by using JavaScript or server-side includes. Here are a few methods:


Method 1: Use JavaScript to Load a Common Menu

You can create a separate file (menu.html) that contains your navigation menu and use JavaScript to include it in all your pages.

Steps:

  1. Create a file named menu.html 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>
  1. Include it in all HTML pages using JavaScript: Add this code inside the <body> 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>

✅ Advantage: Any updates made in menu.html will automatically reflect on all pages.


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


Solution 1: Use Absolute Paths

Instead of using relative paths, use absolute paths based on the root (/).

Example: Change your menu links like this:

<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>

✅ Why?

  • Absolute paths (/about-us/about-us.html) will always resolve from the root domain, no matter where the page is located.

Solution 2: Use a <base> Tag in <head>

If you prefer to use relative paths, you can define a base URL in the <head> of every page.

Steps:

  1. Add this in the <head> section of your HTML files: <base href="https://www.yourwebsite.com/">
  2. Keep your menu links relative, 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>

✅ Why?

  • The browser will automatically resolve all links based on the <base> URL, even if you’re in a subdirectory.

Final Recommendation

  • If your website is static and follows a strict folder structure, use absolute paths (/about-us/about-us.html).
  • If you have a dynamic or multi-domain setup, use the <base> tag to simplify URL management.

Either of these fixes will ensure that your navigation menu works correctly across all 1000+ pages. 🚀

Related Posts

Global Mobile Network Identifiers: A Practical Guide to Telecom Codes and Provider Records

Introduction Every time a mobile phone connects to a cellular tower, a quiet digital handshake takes place. Whether a smartphone is roaming in a foreign airport, an…

Read More

Optimizing Reservations, Waitlists, and Walk-Ins for Independent Dining Rooms

Introduction Running a busy dining room requires careful coordination between the front-of-house staff, the kitchen team, and arriving guests. When a restaurant relies on paper books or…

Read More

Turning Clicks into Clients: The Power of Effective Service Pages

Introduction Driving traffic to a business website is only half the battle. Many business owners invest heavily in digital marketing, social media, and search engine optimization, only…

Read More

The Importance of the About Us Page in Building Online Trust

Introduction When potential customers land on a business website for the very first time, they are looking for more than just products or services. They are looking…

Read More

Shaping Customer Perception Through Effective Homepage Design

Introduction When potential customers visit a business website for the very first time, the homepage serves as the virtual storefront. Within moments of landing on the page,…

Read More

Exploring Colombia on Two Wheels: Medellín, Bogotá, Cartagena, and Beyond

Introduction — Discover Colombia with MotoShare.co Colombia is a land of striking geographical contrasts. Within its borders, modern urban skylines give way to towering Andean passes, lush…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
0
Would love your thoughts, please comment.x
()
x