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.

Answer 1

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.

Answer 2

You can use w3-include-html

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

http://www.w3schools.com/howto/howto_html_include.asp

OR

Make a json file and use it for creating your menu with javascript.

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

2 个答案: