Member Avatar for manchurianCEO

Hi all,

I'm quite rusty at this but volunteered to build a site.

Although this will be a momentary quick fix to have a site running, I'd like to have the menu fetched from a different html file which I already created but somehow it doesn't show.

The menu lays in "menu.html" and has css all in one file within the same folder as "index.html". I can open it in my browser and it loads ok.

The problem is inserting it in the body of the website (index.html). I am using <a href="menu.html"> inside the body but it fails to show it.

I can see the menu only if I put all the css and html code inside the same page which down the road will be a pain when trying to modify it.

Can someone tell me how to properly contain the entire menu bar in a separate html file and which is the correct tag to insert it inside the website's pages?

Thank you!

  • 3 Contributors
  • 2 Replies
  • 289 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A short clarification and practical fixes.

Using an anchor tag just opens the menu file as a separate page — it does not insert that HTML into the current page. For embedding a shared nav you have two reliable patterns: server-side inclusion (best for SEO and search‑engine indexing) or client‑side injection with JavaScript (easy for static hosting). , you were linking rather than including; correctly pointed at server includes and showed the SSI route — both are valid when the server is configured for them.

Server-side (recommended)

  • Put only the navigation fragment in the menu file (no full <html>/<head>/<body> wrappers).
  • Ensure your host parses the page type you choose (.php or .shtml) and rename your pages accordingly so the server runs the include logic.
  • Keep CSS links and scripts in the main page <head>, or use root‑relative paths (starting with /) so asset URLs don’t break when the fragment is included from pages in different folders.
  • If you can, prefer server includes for performance, caching and consistent markup served to bots.

Client-side (quick, works on static hosting)

  • Put only the nav markup in menu.html and load it into a placeholder element with JavaScript. Example:
<div id="site-menu"></div>

<script>
fetch('menu.html')
  .then(r => { if (!r.ok) throw Error(r.statusText); return r.text(); })
  .then(html => document.getElementById('site-menu').innerHTML = html)
  .catch(e => console.error('Menu load failed:', e));
</script>

Notes and troubleshooting

  • If the included file contains its own <head> or <link> tags those may not be applied when injected; keep stylesheets in the main page or dynamically inject a single <link> into <head>.
  • Watch the browser console and Network tab for 404/CORS or MIME issues.
  • For accessibility and SEO, server-side inclusion is preferable; use client-side only when server changes aren’t possible.

Recommended Answers

All 2 Replies

Member Avatar for gabrielcastillo

If you want to seperate the sections of your code, you will need to use PHP and include the files.

<?php include('header.php'); ?>

<?php include('menu.php'); ?>

<?php include('footer.php);>

you can not do this with html files.

Edited by gabrielcastillo
Member Avatar for Member #120589

If you don't use a server-side language like php, you always have SSI (server side includes) - a bit old tech now, but it still works on most servers Apache, IIS etc.

However, it does mean that the pages using SSI must have a special html extension, e.g. .shtml, .stm or .shtm

Here's one I made earlier and it works fine:

index.shtml

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>shtml test</title>
</head>

<body>
<!--#include file="footer.html" -->
</body>
</html>

footer.html

<p>SAY HELLO</p>

I get "SAY HELLO" when I load index.shtml.

SSI was my first foray into web tech back in the early 90s. SSI does a lot more than just this - see http://en.wikipedia.org/wiki/Server_Side_Includes for an intro

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.