Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Have a single menu on multiple pages?

Tags:

html

menu

So I have a website and I'm using a basic menu located at the top right corner of the screen. It's links are as follows:

| Home | Blog | Results | Pictures | Our Location |

Form time to time I need to add a new link to the menu or change where one of the links points to. This means that on every page that the menu exist I must manually change the link. Surely there is some way to have a master menu that is just put on every page.

Or am I dreaming?

like image 669
Bob Dylan Avatar asked Feb 07 '10 07:02

Bob Dylan


People also ask

How do I split a website into multiple sections?

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag.

How do you link a menu in HTML?

Use any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.

How do you put a header and footer on all pages in HTML?

For example the use case for much of the entire internet, an included header and footer for all pages: ... <body> <include src="./header. html"></include> Content <include src="./footer.


2 Answers

Put the menu in a separate file and include it on the server side, either using a full-blown scripting language like PHP (one line) or using SSI.

like image 117
Max Shawabkeh Avatar answered Sep 28 '22 03:09

Max Shawabkeh


There are various ways to do this. It depends what you have access to on the server. Possibly the simplest mechanism is server-side includes. You would just have a file that contains the menu and include it on every page.

You can also do this with every programming language in more or less elegant ways.

EDIT: The SSI is quite simple. You can just make a /header.html file, then do:

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

in the appropriate place.

like image 35
Matthew Flaschen Avatar answered Sep 28 '22 02:09

Matthew Flaschen