CODEWITHSUNDEEP
phphtmlcssmenumenubar
Bob
Bob

Reputation: 143

How to include and link menu file into every webpage using HTML?

I have researched some answers that talk about php, javascript, iframes etc. but I have tried a couple and none of them work. I am new to HTML coding.. and coding in general! 

<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?) 

<iframe src="page.html"></iframe>

or object... both place the menu in a silly little scroll box.

I want to run my menu on my page as if it were a function in C. Where I can just include it, and it be there, or just link it.

Thanks for the help! Ryan

webpage file: biology.html menu file: menu.html

<div class="container">
 			<a href="index.html"><img src="homeicon.jpg" width="50" alt="Home"></a>
 	<div class="redhover">
				<div class="dropdown">
  					<button class="dropbtn">GCSEs</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Chemistry</a>
    					<a href="biology.html">Biology</a>
  					</div>
  				</div>
				<div class="dropdown">
  					<button class="dropbtn">A-Levels</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Chemistry</a>
    					<a href="biology.html">Biology</a>
  					</div>
				</div>
				<div class="dropdown">
  					<button class="dropbtn">University</button>
  					<div class="dropdown-content">
    					<a href="chemistry.html">Telecommunications</a>
    					<a href="biology.html">Electronic Engineering</a>
  					</div>
  				</div>
				<div class="dropdown">
  					<button class="dropbtn">More</button>
  					<div class="dropdown-content">
      					<a href="biology.html">About me</a>
    					<a href="https://www.youtube.com/channel/">Youtube</a>
  					</div>
				</div>
	</div>
</div>

Upvotes: 3

Views: 4306

Answers (3)

Viralk
Viralk

Reputation: 131

There are multiple ways to include a file into another depending on the backend technology you wish / want / need to use.

PHP

The most common way to do it in php is by using the include or require statement inside a php file.

In your specific case your biology.html file must be converted to a biology.php file and then you can add the relative code to include the file:

<?php include('menu.php');?>

This simple statement will add the content in your menu.php file to the current page. This will not work if php is not present on the server and obviously will not work locally without a local development environment

The differences between require and include can be found on the official documentation:

SSI

Another method is to use Server Side Includes. To use the SSI it must be supported and enabled on the webserver. To use SSI you need to change the extension from biology.html to biology.shtml and then add the following statement:

<!--#include file="menu.html" -->

More information on server side includes can be found on wikipedia: https://en.wikipedia.org/wiki/Server_Side_Includes

Upvotes: 0

Rick Calder
Rick Calder

Reputation: 18685

Edit - I'm not a big fan of this approach, but it will work on Github pages.

Create a file called nav.js with your menu defined as a js variable, then use javascript to insert it into an empty div created on each page. This way to update your nav you only have to ever edit nav.js Not pretty but it works

nav.js

var navigation = "<nav>";
navigation +=   "<ul>";
navigation +=   "<li>Home</li>";
navigation +=   "<li>About</li>";
navigation +=   "</ul>";
navigation +=   "</nav>";

document.getElementById("navigation").innerHTML = navigation;

Other pages

<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>

Fiddle: https://jsfiddle.net/ze3hLxx8/1/

Upvotes: 0

KyleS
KyleS

Reputation: 401

You can use php to include files on other pages. Here is some example code to get you started:

<?php
    require_once('menu.php');
?>

You can put this in your HTML page appropriately, however you must make sure that php can be processed on your server and the file containing php code must end in the .php extension.

There are also other methods of including files via php, see here: http://php.net/manual/en/function.include.php and http://php.net/manual/en/function.require.php

Upvotes: 3

Related Questions