Member Avatar for Landscape

I would like to have one menu that is used on 30 pages. I have built the meny with css/html. I only know html as far as page construction goes. Is it possible to "call" the menu with a line of code in html?

  • 4 Contributors
  • 4 Replies
  • 318 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Geowil

Dani AI

Generated

Short answer: yes — you can keep the menu in one file and have every page pull it in so one edit updates all pages. For the practical choices are: server-side includes (best when your host supports PHP/SSI), a build-time approach (assemble pages from a fragment with a static-site tool or simple script), or a client-side include with JavaScript (works on plain static hosts but has tradeoffs). ’s template idea helps when you start new pages, but it won’t automatically change existing files; ’s server-side approach is the usual, robust fix; is right to push external CSS for styles, but an external stylesheet does not remove the need for shared HTML markup.

If your host supports SSI, put the menu markup in a small file (for example /inc/menu.html) and include it from pages. Example directive:

<!--#include virtual="/inc/menu.html" -->

(Different hosts require pages to use .shtml or to enable SSI — check your control panel.) Server-side includes and PHP produce finished HTML the browser receives, so links and images in the menu behave like they are part of the page.

If you only have static hosting, fetch-and-insert via JavaScript is easy to add. Example:

document.addEventListener('DOMContentLoaded', function () {
  fetch('/inc/menu.html')
    .then(function (r) { return r.text(); })
    .then(function (html) {
      document.getElementById('nav').innerHTML = html;
      // scripts inside the fetched HTML may need special handling
    })
    .catch(function (err) { console.error(err); });
});

Cautions and quick troubleshooting:

  • Relative paths: relative URLs inside an included HTML are resolved relative to the served page; URLs inside a CSS file are resolved relative to the CSS file. To avoid confusion, use root-relative paths (starting with /) for images/CSS when possible.
  • Injected HTML may not execute inline scripts; reinsert script tags if needed.
  • For SEO and users without JS, provide a <noscript> fallback or prefer server-side includes/build-time assembly.
    For 30 pages, a server-side include or a small build step will save a lot of time and eliminate error-prone copy/paste.

Recommended Answers

All 4 Replies

Member Avatar for Lightninghawk

If you don't already have the other pages built and edited use your initial page as a template of sorts.
Then everything is standardized that you need to be.

Also copy paste works great and takes about 2 seconds ;)
Think of it this way... you're still going to have to copy paste the script

I'm not certain though if you can call a nav bar. I'm sure its possible through a script, but I'm just getting back into everything and am relearning myself.
Personally the template is the best way to go though.

Edited by Lightninghawk because: n/a
Member Avatar for Landscape

Thank you for your answer. Not sure if it's the way to go though. Updating a template isn't going to update all the pages, so they'll still have to be done one by one. Thanks anyway though.

Member Avatar for twiss

You could use any server side language for this. For example, you could change the extension of your pages to php and write this: <?php include 'menu.php'; ?> Where menu.php contains the menu (duh).

You could also do it the other way around, put the menu in index.php and include a page that contains the text.

Member Avatar for Geowil

Landscape all you have to do is put your css for the navigation menu into an external css file and link it in the webpage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="">
</head>

<body>
<!-- rest of html page-->

replace example.com with your website address (this has to be an absolute path because relative paths do not work in css for linking for whatever reason) and then create a css folder. Next make the nav.css file and place your navigation menu css code from your web page into it.

Add the above link code and you are good to go. All you need to do is replace all of the nav menu css in your pages with that link and it will add your navigation menu.

Please note that you will still need the html code that implements the css and if you have any additional css code besides the stuff for your navigation menu it will also need to be moved to either the nav file or a different .css file as you can not use links and the style tags at the same time.

Edited by Geowil because: n/a
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.