2

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>
Bob
  • 69
  • 11

3 Answers3

3

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

KyleS
  • 391
  • 2
  • 16
  • By renaming the file to a .php, will that affect the html coding, if the file is not longer a html file? – Bob Jun 23 '17 at 16:00
  • 1
    No. you can have HTML in .PHP file extensions. However, if you do not have a web server like Apache running, your PHP will not work – Jorden Jun 23 '17 at 16:02
  • Okay, so I just renamed to biology.php.. I also edited my index.html file so the link to "biology" now goes to "biology.php" as opposed to previously "biology.html" ... now when I click the biology link, it comes as a download rather than take me to the biology page ? – Bob Jun 23 '17 at 16:05
  • It shouldn't be placed as a link, this php code will effectively "insert" your biology.php code into the spot where you have require_once() placed. Make sure to rename your index.html file to index.php. This is so the file tells the server to process the php into html. A good tip: if you have php **anywhere** in a file, it must end in .php (as far as this situation goes) – KyleS Jun 23 '17 at 16:08
  • By the link, I mean on my index page (homepage to website) I have a link called "biology" which previously took me to the webpage (biology.html) obviously since its renamed to biology.php, I have to change the link target to biology.php no? Since biology.html doesnt exist anymore. But when clicking that link to biology, it downloads the php file lol – Bob Jun 23 '17 at 16:11
  • Ok, this question may actually be entirely different than we all expected. Are you trying to just have a "hyperlink" to your biology page? In that case, you would want to use Biology link (or .php appropriately, whatever file extension you choose, use that instead). EDIT: unless this is a separate area or something, yes you need to change all links to the page to be **exactly** the file name with extension. – KyleS Jun 23 '17 at 16:12
  • No. Homepage (index.html) on homepage: menu bar: "Home" "biology" "other" Where home, biology and other are all hyperlinks to other pages. the index(home) file is index.php the biology page is biology.php the other page is other.html To go from home page --> biology page I need a hyperlink to it. The link target is now biology.php On that page, and on the "other" page I want a menu bar to display using the code in menu.html file The problem now I have renamed as suggested, to biology.php, is that the hyperlink no longer works. It downloads instead. – Bob Jun 23 '17 at 16:17
  • Links to .php files should work exactly the same as .html files. I would suggest making sure that your links are correctly named with the updated file extensions. Additionally, make sure that **any** file that is interacting with php in **any** way, has a .php file extension. – KyleS Jun 23 '17 at 16:21
  • It downloads the file because Github pages doesn't run PHP. It is for hosting static sites only so it has no PHP parser, this isn't going to work if you use Github for hosting. – Rick Calder Jun 23 '17 at 16:21
  • Ok yeah if thats true, @RickCalder assessment is correct. Your server/host must be able to process php for this to work. – KyleS Jun 23 '17 at 16:23
0

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/

Rick Calder
  • 16,986
  • 3
  • 19
  • 40
  • Im new to coding and the like. I have no idea what you mean by an "actual web server" .. Im hosting using github and have my own domain – Bob Jun 23 '17 at 16:08
  • See the last paragraph of my answer. You can't use PHP on Github pages, they're for static hosting only. – Rick Calder Jun 23 '17 at 16:08
  • Updated answer with a JS solution that will work in your local environment and on Github pages. It's ugly, but it works fine. – Rick Calder Jun 23 '17 at 16:20
  • Your menu code is irrelevant, just follow the JS instructions I gave. Example here: https://jsfiddle.net/ze3hLxx8/ The only difference is for you, you want to save the menu as a separate js file and then include it on the pages so you only have to update the menu once. Just take each line of your menu and do the += as above to add it to the variable. – Rick Calder Jun 23 '17 at 16:30
  • Here is the fiddle with your navigation. Obviously the classes don't work in the fiddle. https://jsfiddle.net/ze3hLxx8/1/ – Rick Calder Jun 23 '17 at 16:33
  • Thank you! Just to try and understand, how does the nav.js know to link to the menu.js file? To add more links, I presume I just add more navigation lines, right? – Bob Jun 23 '17 at 16:59
  • What menu.js file? There isn't one in my example. There is just nav.js (which you can call menu.js if you want, you just have to edit the script src in your other pages) – Rick Calder Jun 23 '17 at 17:04
  • And yes, you can add lines anywhere you want, just be careful of HTML structure, that's one of the downsides of doing it this way, constructing HTML in js can be tedious. – Rick Calder Jun 23 '17 at 17:04
0

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

Viralk
  • 131
  • 1
  • 5