Menu in single file, then call it in all HTML web pages

Question

On my html web page I have designed menu as a UL (Unordered List)

Now I have multiple pages. In case I add one menu item, then I have to edit all web pages.

I simply want that I could create my menu UL (unordered list) in a separate file i.e. js file (or any other file) and call it in my all html web pages. So that when ever I have to add a new item in my menu, I would simply add menu item in one file; rather then editing all html web pages.

Please give me any solution or guide me please.

Thanks in advance.

Akash Tomar · Accepted Answer

You will need to replicate this code in all your html files.

<body>
    <ul class='my-list'></ul>
</body>

Js:

var list = `<li>Dummy 1</li><li>Dummy 2</li>`;
$(".my-list").append(list);

This could be one of the many ways, but i think this is the easiest one to do your job. You will only need to change the JS code whenever you want to add a new list item.

<UL> Menu in single file, then call it in all HTML web pages

Tags:

javascript

html

jquery

css

Anwer Hussain

1 Answers

Akash Tomar

Recent Activity

Donate For Us