tl;dr my question is: My website consists of several .html, what are my options when it comes to navigating through them with just html, css and js.
background: I’ve been through countless of website tutorials the past days, but one thing that I feel isn’t explained well is navigation. You get a lot of “how to make this cool menu” but very little on how to make them do something (unless it’s a static onepager and all links are #anchors). And while I know of a couple of ways, it’s been a very long time since I coded by hand, and was wondering if there are better ways of doing this. (with just HTML, CSS and JS) ELI5 level appreciated.
So what I did back in the day was to create my index.html and when I was satisfied I made copies of if, renamed them, kept the layout, and just changed the main content. So all menu items basically presented a while new page. And if I changed layout on one I had to do it on all of them.
I also seem to recall also using iframes(?) so that I could just update the frame and not the whole page, but I’m unsure if that was pure html or if that used some scripting like php.
But html and css and js has changes a lot the past 25 years, so how can I do this now?
Using iframes as you described should work just fine in pure HTML.
You can also use a static site generator program: it can take as input one file for your navigation bar, one file for each of your pages, and output your pages with the navigation added. If you use a static site generator you would re-run it every time you change a page or change your navigation, then upload the outputted files to your webhost. Some popular static site generators are Jekyll, Eleventy, and Hugo, and there are more marked with “SSG” in the SSG section of the resources list.
Cool menu in what context? Visual? Function? Organization?
As far as better ways of doing it goes, that depends entirely on your host. We get a lot of people here with Neocities, which does not offer support for Server Side Includes (SSI). If you’re on Neocities you can use HTML includes with Javascript.
But if your host does support SSI then:
Either way, it gives you the ability to make a singular reference file for your menu, which propagates to all all files it attaches to, making it easy to maintain menu consistency.
As Vivivi mentioned, iframes works just fine. Though the downsides to iFrames is that some mobile browsers may be weird about it, and it makes it impossible for anyone to bookmark or reference specific sections of the site.
Also some of your description seems to imply your workflow for all pages of your site, not just the menu item. If you’re not used to it already, keeping all of your styling and layout contained in a single CSS file will make it easy for every page to be uniform and updates will be spread across all pages when made to the CSS
About the terms most SSGs use, you have collection(s) (list(s) of pages / items) and layout(s) (with menu for-looping over the collection and a slot for the content of the current item. If it’s a blog, there might be a pre-defined collection called posts.
I’ve seen people invert that: rather than a layout with a slot for including collection item content there is a content page with a slot for including a menu. Whether that is server-side, client-side, or build-time inclusion doesn’t change the authoring experience too much.
If you want a tool to make client-side includes easier, h-include looks good to me.
The main problem with using iframes for this purpose is their fixed size.
This got me thinking about discovering Server Side Includes and shtml about 25 years ago. It made managing a website with hundreds of pages so much easier!
Of course, you still had to work through every page when you did significant structural changes. But that inverted way of thinking was very much how I thought about websites back in those days. I think the advent of tools like Wordpress and the like was what eventually flipped it around: Save a slot for content, which I suppose is how I still see the web. Although nowadays, as far as my personal projects go, I try to keep everything not ‘content’ to a minimum.