Menu
I have two HTML documents that will be linked to the same site. How do I create a navigation menu that I will only need to edit once, for its changes to be applied to all HTML documents that menu is on?
I'm a beginner to HTML and have learnt the basics, but could you please help?
This is the menu code:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="apps.html">Apps</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
275
asked Oct 20 '25 02:10
You will not be able to do this with just plain HTML.
Few Options :
Javascript - Using javascript you could append the navigation to each page.
PHP - Using PHP would be easiest and you could process your navigation as an include to your code.
In my opinion you should use php.. JavaScript is way overkill for this particular situation. What I typically do it create a series of php files that form the structure for my websites.
A Simple structure would be
create a php file named head.php, you can do this using notepad, notepad++, netbeans etc..
head.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- NAVIGATION SECTION HERE -->
<div class="nav">
<ul>
<li><a href="http://google.com">First link</a></li>
</ul>
</div>
index.php or your other pages
<?php include "head.php"; ?>
<div>
content of html page
</div>
<div class="footer"></div>
</body>
</html>
If you notice at the top of index.php you see an include statement. This will add the head.php contents to any page that you call this include from. Since your navigation section is located in head.php, your navigation will be uniform throughout all of your pages.
For this to work, please make sure that your host allows you to use php.
129
answered Oct 22 '25 17:10
If I understand correctly you need to include some HTML file to another. With HTML less 5-th version you can't do this without javascript. The best solution to use jQuery if you don't want use PHP/Java/.NET solutions. But don't forget that you will need use local server (for example, Apache).
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" />
<script type="text/javascript" src="script.js"/>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
script.js:
$(document).ready(function(){
$.get("menu.html", function(data) {
$("#menu").html(data);
});
});
menu.html:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="apps.html">Apps</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
JQuery: jquery.com
Docs: api.jquery.com/html
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
