Member Avatar for Erek4

I am cleaning up my code a bit and wanted to simplify something:

I have a dropdown menu that I added to every html page in my website.

Is there a way to have the code in one page? so that I can make one change to it (when needed) instead of changing the same thing for every page. My code for the drop down menu is below:

<link href="../p7_cssexpress/p7exp/p7exp.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="p7_express/p7exp/p7exp.js"></script>
  <!--[if lte IE 7]>
  <style>
  #menuwrapper, #p7menubar ul a {height: 1%;}
  a:active {width: auto;}
  </style>
  <![endif]-->


</head>
<body onLoad="p7_ExpMenu()">

<div id="profilebackground1">
  
<div id="banner">
<h1>Mybanner</h1>   
</div>

<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="../name.html">Home</a></li>
<li><a class="trigger" href="#">Profiles</a>
<ul>
<li><a href="../Profiles/name.Profile.html">Candice</a></li>
<li><a href="../Profiles/name2.Profile.html">Erek</a></li>
<li><a href="../Profiles/Interview.html">Interview</a></li>
</ul>
</li>
 <li><a class="trigger" href="#">Event</a>
<ul>
<li><a href="../Event/Phase1.html">Phase I</a></li>
<li><a href="../Event/Phase2.html">Phase II</a></li>
<li><a href="../Event/Phase3.html">Phase III</a></li>
<li><a href="../Event/Maps.html">Maps</a></li>
<li><a href="../Event/Preparations.html">Preparations</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Bikes &amp; Equipment</a>
<ul>
<li><a href="../BikesAndEquipment/Bikes.html">Bikes</a></li>
<li><a href="../BikesAndEquipment/Filming.html">Filming</a></li>
<li><a href="../BikesAndEquipment/Gear.html">Gear</a></li>
</ul>
</li>
<li><a class="trigger" href="#">Partners</a>
<ul>
<li><a href="../Partners/Charity.html">Charity</a></li>
<li><a href="../Partners/Sponsors.html">Sponsors</a></li>
<li><a href="../Partners/Donations.html">Donations</a></li>
</ul>
</li>
<li><a href="../Blog/Blog.html">Blog</a></li>
<li><a href="../ImageGallery/ImageGallery.html">Image Gallery</a></li>
<li><a href="../VideoClips/VideoClips.html">Video Clips</a></li>
<li><a href="../Travelogue/Travelogue.html">Travelogue</a></li>
<li><a href="../ContactUs/ContactUs.html">Contact Us</a></li>
</ul>
</li>
</ul>
<br class="clearit">
</div>
<!--End of Menu-->
  • 3 Contributors
  • 2 Replies
  • 135 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: yes — keep the menu markup in one file and include it into every page. Common, practical paths are server-side includes (PHP or SSI) or a small client-side fetch-and-insert. pointed toward PHP (the simplest robust route when the host supports it). mentioned frames/SSI — frames work but have accessibility, SEO and navigation drawbacks; SSI is fine where the server is configured for it.

A concise server-side approach (recommended for SEO and robustness): serve pages as PHP and place the menu in a single partial. Example pattern:

<?php
// page.php (any page served as .php)
require_once __DIR__ . '/includes/menu.php';
?>

Put all menu links and markup into includes/menu.php. Use DIR or root-relative paths so link targets and included assets resolve correctly from any folder.

A client-side alternative (no server config change) using Fetch: load the menu HTML into a container and then re-run the menu initializer (the original menu script must be initialized after injection):

document.addEventListener('DOMContentLoaded', async function () {
  const res = await fetch('/includes/menu.html');
  const html = await res.text();
  document.getElementById('menu').innerHTML = html;
  if (typeof p7_ExpMenu === 'function') p7_ExpMenu();
});

Notes and troubleshooting

  • Scripts inside injected HTML won’t execute automatically; keep CSS and JS in the main page or dynamically inject script elements.
  • Use root-relative links (beginning with "/") inside the menu so links work from any directory.
  • SSI requires server support and different file extensions; PHP requires pages served as .php.
  • Server-side includes are better for SEO and performance; client-side injection is useful when server changes aren’t possible.

Further reading: PHP include semantics (php.net include) and the Fetch API (MDN Fetch API).

Recommended Answers

All 2 Replies

Member Avatar for ktd

Do you know php?

Member Avatar for almostbob

using
SSI server side includes for html
or
PHP a serverside preprocessor
easy
in html the fix is a kludge
not all browsers support iframes
In each html file where the menu is supposed to be

<iframe src='menu.html' frameborder='0'>The menu is in an iframe that your browser does not support, you are stuck on this page forever ha ha ha</iframe>

in the menu.html file

<a href='pagename1.html' target='_top'>page1</a>
<!-- repeated menu for as many as there is all with target='_top' -->

the files should all be properly coded to validate under the schema in use, this is just the clip needed
ssi or php are a single line include on each page

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.