0

I have a file that have a navigation bar and interact with another file as css and javascript file. What I need to do it is include this code in another html page and I don't know to do this. I'm using nodejs as server side and as a front end i'm using w3.css and w3.js. Can You Help??

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script src="https://kit.fontawesome.com/a01ae3d94e.js" crossorigin="anonymous"></script>

<nav>//code<nav>

<script src="script.js"></script>
epilif3sotnas
  • 64
  • 1
  • 9
  • 2
    [some what same condition](https://stackoverflow.com/questions/36387676/is-it-possible-to-reuse-html-like-a-template-on-multiple-pages#comment60392652_36387676) You can take a look at this question. You can also use include tag in nodejs. – Gunesh Shanbhag Dec 03 '20 at 07:26
  • 1
    In that question they use html import and now it is deprecated – epilif3sotnas Dec 03 '20 at 07:38
  • Since you are using nodejs you can require that html file https://nodejs.org/api/modules.html#modules_require_id – Sachin Yadav Dec 03 '20 at 07:55
  • Does this answer your question? [How to load nav menu from an external file? (No Wamp, all code must be 'browser-side')](https://stackoverflow.com/questions/39447411/how-to-load-nav-menu-from-an-external-file-no-wamp-all-code-must-be-browser) – Sachin Yadav Dec 03 '20 at 08:05
  • How I do if I have a button this navigation bar? – epilif3sotnas Dec 03 '20 at 15:58

1 Answers1

0

Create separate file for navigation drawer navbar.html

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
</ul>

In your index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<div id="nav"></div>

In your script.js add this

$(function() {

    $("#nav").load("navbar.html");

    function activeNav() {
        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
         $("#nav ul li a").each(function(){
              if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
              $(this).addClass("active");
         });
    }

    setTimeout(function() {
        activeNav();
    }, 100);

});

Now you can import the script.js file in other HTML and have the jquery to load the navbar. Don't forget to add id as nav like this <div id="nav"></div>in the files where you want to include the navbar code. Referenced answer

Gunesh Shanbhag
  • 559
  • 5
  • 13