Question 265813 in Html Question posted in
Some basic documentation can be found here.

Html – How do I move part of the code to another file so that it can be referenced on all pages?

I have a website for personal use. I need to move the upper part and sidenav-menu to a separate file and simply link to it on all pages, as I will need to add new buttons to the menu in the future. I’m completely new to website creation, so I don’t understand how to do it. (I am use Materialize)

I have no experience, and have literally 0 idea how to make it

Tags:

2

Answers


  1. 0

    Can you provide more info about your project?

    Materialize is just a CSS Framework, but we need to know which framework web you are using and so on…

    Login or Signup to reply.
  2. 0

    Your question is a bit vague but what I can understand from it is that you want to create a separate file for a nav bar and link it to different pages instead of adding the same code to each page.

    If you’re using JavaScript, you can create a separate file for your navbar, like navbar.html, and then use JavaScript to fetch and insert it into your pages.

    The below steps are considering a file called navbar.html but should work for your sidenav-menu file as well.

    1. Create a Navbar File (navbar.html):
      In your project directory, create a new HTML file for your navbar. This file will contain the HTML and be linked to your Materialize CSS code. Below is what this file should look like:
    <!-- navbar.html -->
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
    1. Modify Pages to Include the Navbar. In each HTML file where you want to include the navbar, add a container element (e.g., a div) to act as a placeholder for the navbar. Something like below:
    <!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
</head>
<body>
    <div id="navbar-container"></div>
    <!-- The rest of your content goes here -->
    <script src="path/to/navbar-injector.js"></script>
</body>
</html>
    1. Create a new JavaScript file, let’s call it navbar-injector.js. This file will use the Fetch API to load the content of the navbar.html file and inject it into the placeholder contain. Below is the code:
    // navbar-injector.js
document.addEventListener("DOMContentLoaded", function () {
    fetch('path/to/navbar.html')
        .then(response => response.text())
        .then(data => {
            document.getElementById('navbar-container').innerHTML = data;
        });
});
    1. In each file, include the navbar-injector.js file at the end of each HTML file, just before the closing tag as shown below:
    <!-- index.html -->
<!-- ... (previous content) ... -->
<script src="path/to/navbar-injector.js"></script>
</body>
</html>

    These steps should help you out but if you have any problems with it, feel free to comment and I’ll try to help out 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search