How would I use a navigation menu over multiple pages?-CodePudding

I'm building a website that's going to have hundreds of pages. I'm looking for a way to include a navigation menu from one file, once, so when the menu changes I only have to change one file to change the menu on every page instead of having to make the change in every single file. I would normally use iframes for this making one frame the menu and the other the content pages. How can we do this without using iframes?

Can the nav menu file be src'd using css in a style.css file somehow? If that's possible how would I src a file using css or html similar to how we embed images?

Include php functions/code/script? I've seen exampled suggestions for this here on this site but I haven't been able to get any of the suggestions I've seen to work.

I imagine it's possible to do using some form of java/javascript/jquery. The last time I dove in to any of those languages was 20 years ago. Things have changed with them so drastically I'm no longer capable with them so I'd need step-by-step, very detailed instructions that cover every step of how it would be done that way.

Is there not a way to make a single nav menu file without using iframes? I believe there has to be a way but I've been unable to find it.

This video seems to share what I want to do. I'm installing Visual Studio to give it a try. https://youtu.be/shgr0ji71qI

I attempted that and loaded it in the WAMP I use (EasyPHP) and that didn't work either. I'm hoping someone can either provide an example that fills me in on what I'm doing wrong or an easier way to do it than using php in an html file that I'm obviously missing something to get it working locally.

The thing that's really baffling me is any plain HTML or CMS package I add to easyPhP loads, but following the above video, using Visual Studio to do it just like he is typing every character he types doing it exactly as he's doing it = doesn't load, 404 in the WAMP.

I may just go back to using iframes.

Please include full, detailed, step-by-step instructions in your answer.

CodePudding user response：

I used to use just the standard <?php include "./filename.html" ?>

But you can also do this in JQuery, this post explains it: Make header and footer files to be included in multiple html pages

CodePudding user response：

I did something like this in my previous project. You can create a common constant file (which you have to link all of your pages). then in that constant file u can create a string variable, which will contain your HTML code(html structure of your navigation). after that you can append the variable in that page.

in your constant file-

$(document).ready(function(){
    let menus = `<div>Appended menu 1</div> <div>Appended menu2</div> `
    $("#nav-container").append(menus);
});

and in html

<div id="nav-container"></div>

if u have any queries. Let me know.