Create an external file for side menu

Question

How do I create an external file for my side menu?

<a class="active" href="C.html" style="font-size: 1.1em;font-weight: 900;">C Programming</a>
<a href="C++.html" style="font-size: 1.1em;font-weight: 900;">C++</a>
<a href="CSharp.html" style="font-size: 1.1em;font-weight: 900;">C#</a>
<a href="Go.html" style="font-size: 1.1em;font-weight: 900;">Go</a>
<a href="Java.html" style="font-size: 1.1em;font-weight: 900;">Java</a>
<a href="JavaScript.html" style="font-size: 1.1em;font-weight: 900;">JavaScript</a>
<a href="PHP.html" style="font-size: 1.1em;font-weight: 900;">PHP</a>
<a href="Python.html" style="font-size: 1.1em;font-weight: 900;">Python</a>
<a href="Ruby.html" style="font-size: 1.1em;font-weight: 900;">Ruby</a>
<a href="Swift.html" style="font-size: 1.1em;font-weight: 900;">Swift</a>

Currently I have these kind of links in every file and the code is just getting too much. Is there a way to create an external file for the menu items?

I tried this but the problem is class="active". I want to highlight a menu item when my menu item is in index.php I Know how to achieve this when my menu is in each individual HTML file but how do I do that when it's in external PHP file ?

Index.php

<html>
<head>
  <link rel="stylesheet" type="text/css" href="CSS/Tags.css">
  <link rel="stylesheet" type="text/css" href="CSS/Nav.css">
  <link rel="stylesheet" type="text/css" href="CSS/Card.css">
  <link rel="stylesheet" type="text/css" href="CSS/Buttons.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="sidenav">

 <h1>&nbspOthers</h1>
 <a href="" style="font-size: 1.1em;font-weight: 900;">MS Excel</a>
 <a href="" style="font-size: 1.1em;font-weight: 900;">MS PowerPoint</a>
 <a href="" style="font-size: 1.1em;font-weight: 900;">MS Word</a>
 <a href="" style="font-size: 1.1em;font-weight: 900;">WordPress</a>
</div>

</body>
</html>

Main file

<?php include('index.html'); ?>

Don't use JS to include static content from another page (as it makes an extra request to the server). Instead you should be able to 'include' the content on the server before the HTML is sent to the browser. Exactly how you do that depends on what type of server you're using, and the technologies it supports. — Rory McCrossan, Feb 14 '20 at 14:49
Well im hosting it on my own right now. ill probably shift to a server if i get enough traffic @RoryMcCrossan — Hailey Ash, Feb 14 '20 at 15:00
I have several questions : Are you files `.html` or `.php` files ? The naming of your file is not clear, your main file includes `index.html` and your other file is `index.php`. Do you have a PHP interpreter (like [Apache](https://httpd.apache.org/)) installed on the server/computer hosting your website ? PHP code inside a PHP file won't be interpreted if the hosting machine doesn't have a PHP interpreter — Oddrigue, Feb 14 '20 at 15:56

Abolfazl Ghaemi · Answer 1 · 2020-02-14T15:50:52.973

You should NOT use javascript to include your menu . you can use PHP to simply include your menu ( but i sugget header ) file to your page :

<?php include('/template/header.html'); ?>

or you can use pre processors like Gulp :

@@include('./template/header.html')

var fileinclude = require('gulp-file-include'),
gulp = require('gulp');

gulp.task('fileinclude', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

or Pug or Grunt and ......

About your problem in comments . lets say you are in your main folder and you have this 3 files :

index.php
header.html
homepage.html
footer.html

index.php should be like this :

<?php
include('header.html');
include('hompage.html');
include('footer.html');
?>

and then in your browsers you should open index.php .

** don't use index.html and index.php in the same time .

if it didn't work . you should get error in your index.php file .

when your code works . i suggest you to use readfile() instead of include . if your another files are just html and not have any php codes in it .

For some reason PHP include doesnt work. Should i install some additional plugin for implementing php or something in my .html code? — Hailey Ash, Feb 14 '20 at 15:10
@HaileyAsh do you get any errors ? is your main file ( for example : index.php ) in the same directory as your header.html file ? — Abolfazl Ghaemi, Feb 14 '20 at 15:14
change the extension of `index.html` to `index.php` , then use the php code inside this file . — Abolfazl Ghaemi, Feb 14 '20 at 15:21

Oddrigue · Answer 2 · 2020-02-14T16:40:53.933

As pointed out by Abolfazl Ghaemi :

You should NOT use javascript to include your menu . you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>

The Gulp/Grunt solution is fine but I'll stick with the <?php include(); ?> solution for your problem.

Does the hosting machine speak PHP ?

If browsers can read HTML just fine to give you a webpage, they can't read PHP. Instead, PHP need to be executed by something on the hosting machine and you will need a PHP interpreter for that like Apache.

If you didn't already, I strongly recommend you to install it or even a full AMP stack.

PHP in HTML files won't work

You need to make sure your file using PHP instructions are .php files. Otherwise, the code in your <?php ?> tag (the PHP code) won't be interpreted at all.

Make sure your main file is a .php file.

Are you calling the correct file ?

Also, you need to be sure the file name you are including is correct. The content as shown in your question is

Main file

<?php include('index.html'); ?>

but your file is actually index.php not index.html.

HTML is prettier with CSS

If you want to "highlight" the item with active class, you will need CSS. You can quickly add CSS in your file with a <style> tag. See the example below.

<ul>
<li>Not highlighted</li>
<li>Still not highlighted</li>
<li class="active">Highlighted ! Spotlight's on me baby !</li>
<li>Not highlighted</li>
</ul>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

Ok making php work isnt a big deal. But as i mentioned in the question how do i get a certain menu to be highlighted — Hailey Ash, Feb 14 '20 at 16:31
My bad, didn't see that part :) You'll achieve this by adding CSS on the `active` class. You can quickly add CSS code in your file in a ` — Oddrigue, Feb 14 '20 at 16:37
I think you got me wrong. See i have 10 files with the same menu. When im in Page A i want A in the menu to be highlighted. When im in Page B i want B to be highlighted. i can easily achieve this with adding code in each html file. My question is how do i use an external include file where i place my menu and achieve this — Hailey Ash, Feb 14 '20 at 17:09
Ok, I think I got it : You want to include the "menu" file in all your other pages and you want that "menu" file to auto-highlight the link corresponding to your current page. Is that it ? — Oddrigue, Feb 14 '20 at 21:54

Create an external file for side menu

2 Answers2

Does the hosting machine speak PHP ?

PHP in HTML files won't work

Are you calling the correct file ?

HTML is prettier with CSS