Hi,
I'm making a website for an organization. We rent space from a website host..

- They would like the same standard drop down menu in HTML on every page.
- The host's website builder is buggy so we can no longer use that, we will be using manual HTML which I will write with a text editor. I have experience doing this.
- My work space where I make the HTML files is Windows 11. I will be making the HTML files on my PC and then it's simple to upload them to the host. I will also be using a global CSS file.
- I do not have shell access to the hosting website. Access is through Cpanel.

I know how to make a standard dropdown multi-level menu in HTML. I already have that part working. What I don't know how to do is make the menu once, and include it at the top of every HTML file, (just after the "body" tag) like a programmer includes files.

Is there a way to do this easily? Or will I have to make a .bat file that does this somehow and "build" all files with different html headers, but the same menu, followed by different text for the body, then a possible standard footer.

Since I've always done HTML with a text editor I'm not away of any tools where I can manage the HTML files on my PC.

Thank you!

On 4/23/2022 11:44 AM, C Bacca wrote:
> using a global CSS file

I'm kinda interested in a single site-wide menu too

in my CSS file?

no scripts or cookies, etc.

--
Mystery? -> https://www.dalekelly.org/

On Sat, 23 Apr 2022 08:44:39 -0700 (PDT), C Bacca wrote:
> Hi,
> I'm making a website for an organization. We rent space from a website host..
>
> - They would like the same standard drop down menu in HTML on every page.
> - The host's website builder is buggy so we can no longer use that, we will be using manual HTML which I will write with a text editor. I have experience doing this.
> - My work space where I make the HTML files is Windows 11. I will be making the HTML files on my PC and then it's simple to upload them to the host. I will also be using a global CSS file.
> - I do not have shell access to the hosting website. Access is through Cpanel.
>
> I know how to make a standard dropdown multi-level menu in HTML. I already have that part working. What I don't know how to do is make the menu once, and include it at the top of every HTML file, (just after the "body" tag) like a programmer includes files.
>
> Is there a way to do this easily? Or will I have to make a .bat file that does this somehow and "build" all files with different html headers, but the same menu, followed by different text for the body, then a possible standard footer.
>
> Since I've always done HTML with a text editor I'm not away of any tools where I can manage the HTML files on my PC.
>
> Thank you!

If it's for simple menu which is not a pull down menu, it can be done with
pure HTML, using IFRAME.

In your case, the menu is placed in a separate HTML which contains nothing
but the menu where all menu links has a `target` attribute which is set to
`_top` or `_parent`.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target

All the HTML pages which shows the menu would have an IFRAME to show the
menu. e.g.

<iframe "menu.html"></iframe>

The IFRAME should be styled to fit the whole area of the menu.

For pull down menus, JavaScript (JS) would be needed to retrieve the
separate menu HTML and insert it into the current page (JS is not required
for the menu pulldown mechanism). In this case, the menu HTML should contain
only the content - without HTML, HEAD, and BODY tags.

For all HTML pages which need to show the menu, it should have a container
tag for the menu. e.g.

<div id="menu"></div>

Then have a JS script to load the menu HTML resource and place it into that
container. e.g.

<script>
(async () => menu.innerHTML = await (await fetch("menu")).text())()
</script>

Note: the SCRIPT tag should be placed _after_ the `menu` DIV tag within the
HTML.

In message <amlj3k4y7t2k.ml0kjy6dglf5.dlg@40tude.net> JJ <jj4public@gmail.com> wrote:
> For pull down menus, JavaScript (JS) would be needed to retrieve the
> separate menu HTML and insert it into the current page (JS is not required
> for the menu pulldown mechanism). In this case, the menu HTML should contain
> only the content - without HTML, HEAD, and BODY tags.

I'm pretty sure you cn do this without JavaScript. It is certainly
possible to make drop-down menus using only HTML and CSS and I can't
think of any reason using an iframe would change that.

--
Strange things are afoot at the Circle K

In message <slrnt6bg89.v8u.g.kreme@zephyrus.local> Lewis <g.kreme@kreme.dont-email.me> wrote:
> In message <amlj3k4y7t2k.ml0kjy6dglf5.dlg@40tude.net> JJ <jj4public@gmail.com> wrote:
>> For pull down menus, JavaScript (JS) would be needed to retrieve the
>> separate menu HTML and insert it into the current page (JS is not required
>> for the menu pulldown mechanism). In this case, the menu HTML should contain
>> only the content - without HTML, HEAD, and BODY tags.

> I'm pretty sure you cn do this without JavaScript. It is certainly
> possible to make drop-down menus using only HTML and CSS and I can't
> think of any reason using an iframe would change that.

Meant to add:

However, this is simple to do in JavaScript and JavaScript is the best
and right way to do this, and much MUCH easier to write, maintain, and
manage. Dropdowns with CSS are certainly possible, but they are ...
hairy.

--
in the long run there's still time to change the road you're on

Lewis wrote:

> In message <amlj3k4y7t2k.ml0kjy6dglf5.dlg@40tude.net> JJ <jj4public@gmail.com> wrote:
>> For pull down menus, JavaScript (JS) would be needed to retrieve the
>> separate menu HTML and insert it into the current page (JS is not required
>> for the menu pulldown mechanism). In this case, the menu HTML should contain
>> only the content - without HTML, HEAD, and BODY tags.
>
> I'm pretty sure you cn do this without JavaScript. It is certainly
> possible to make drop-down menus using only HTML and CSS and I can't
> think of any reason using an iframe would change that.

You can of course create a dropdown menu in plain HTML, using the
<select> element, and you can make it nested in a sense by using
<optgroup> elements. But a <select> element is just a form field where
the user can select one (or maybe more) of a given set of values. No
functionality; specifically, no linking to another page or place.

Using different HTML elements you can create a set of elements that
appear as vertical list by default, but with some relatively complicated
CSS you can make it behave, in a user interface, as a dropdown list
(possibly nested). Still, this does not add functionality. If the basic
building blocks of the construct are <a href=...> elements, they’ll work
as links, but only when clicked on (or whatever the link activation
method is in each user agent).

So I think it really boils down to the necessity of some JavaScript
code. But it can be really simple and can be written inside the iframed
HTML document. You could have just one onchange=... attribute for a
<select> element so that selecting an options works much the same way as
following a normal link.