CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Pepijn Ekelmans
Pepijn Ekelmans

Reputation: 55

How do I insert the same <div> (which contains my menu) into all other html pages?

Sorry if my question is trivial, I am a beginner and am not quite sure how to approach this problem.

I am writing a blog that has a MENU bar at the top of the page. Since I don't want to update all menus on every html page, I wish to source the containing my menu from a different html page.

I have tried using an iframe or frameset, but those will unfortunately cut my dropdown menu off at the bottom. This means I either have to remove those or make a frame so large that it is large enough for the dropdowns, but that will squish the rest of the page down. Also, if I clicked any of the menu options, the page that would be updated would be the frame itself :|.

I was therefore wondering if it is possible to call a small portion of pre-existing code into an html file? I have also tried the .load() function of JQuery, but even simple tutorials don't seem to work for me.

Does anyone know a way to either import the div into an html file, or a way to get my .load() function to work? I have added the .load() tutorial I used below.

PAGE THAT CONTAINS THE DIV

<html>
<head>    
</head>
<body>
<p>This is demo text.<p>
</body>
</html>

PAGE THAT RECEIVES THE DIV

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

   $('#content').load("new.html");

});
</script>
</head>
<body>

<div id="content"></div>

</body>
</html>

Upvotes: 0

Views: 629

Answers (1)

Justin C
Justin C

Reputation: 316

Build the menu as a PHP file, then pull it in using an include function:

<?php include("/yourMenu.php"); ?>

It's that simple. Changing /yourMenu.php will change it on every page. Hope that helps!

Upvotes: 1

Related Questions