How can I reuse a navigation bar on multiple pages

Question

I just finished making my home index html page  To keep the nav bar where it is  and have it stay while users click through all my pages  Do I have to copy and paste the nav code to the top of each page  Or is there another way to do so that would look cleaner   HMTL nav    lt nav gt       lt div gt           lt a href     gt               lt div id  logo  gt  lt img src  image png  alt  Home   gt  lt  div gt               lt div id  headtag  gt  lt img src  image png  alt  Home   gt  lt  div gt               lt div id  tagline  gt  lt img src  image png  alt  Home   gt  lt  div gt           lt  a gt       lt  div gt       lt div gt            lt a href     class  here  gt Home lt  a gt           lt a href   about html   gt About lt  a gt                 lt a href   services html   gt Services lt  a gt                     lt a href   pricing html   gt Pricing lt  a gt               lt a href   contact html   gt Contact Us lt  a gt           lt input id  srchbar  type  search  placeholder  Search  gt       lt  div gt   lt  nav gt

User · Answer

Brando ZWZ provides some great answers to handling this situation.

Re: Same navbar on multiple pages Aug 21, 2018 10:13 AM|LINK

As far as I know, there are multiple solution.

For example:

The Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar).

Then we could directly load it from the jquery without writing a lot of codes.

Like this:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

Solution2:

You could use JavaScript code to generate the whole nav bar.

Like this:

Javascript code:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

User · Answer

A very old but simple enough technique is to use  Server-Side Includes   to include HTML pages into a top-level page that has the  shtml extension  For instance this would be your index shtml file    lt html gt   lt head gt     lt  head gt   lt body gt   lt  -- repeated header  note that the  include is in a HTML comment -- gt   lt  -- include file  header html  -- gt   lt  -- unique content here    -- gt   lt  body gt   lt  html gt    Yes  it is lame  but it works  Remember to enable SSI support in your HTTP server configuration  this is how to do it for Apache

User · Answer

I know this is a quite old question  but when you have JavaScript available you could use jQuery and its AJAX methods   First  create a page with all the navigation bar s HTML content   Next  use jQuery s   get method to fetch the content of the page  For example  let s say you ve put all the navigation bar s HTML into a file called navigation html and added a placeholder tag  Like  lt div id  nav-placeholder  gt   in your index html  then you would use the following code    lt script src    code jquery com jquery min js  gt  lt  script gt   lt script gt    get  navigation html   function data           nav-placeholder   replaceWith data        lt  script gt

User · Answer

You can use php for making multi-page website    Create a header php in which you should put all your html code for menu s and social media etc Insert header php in your index php using following code     lt   php include  header php     gt     Above code will dump all html code before this Your site body content    Similarly you can create footer and other elements with ease  PHP built-in support html code in their extensions  So  better learn this easy fix

User · Answer

This is what helped me  My navigation bar is in the body tag  Entire code for navigation bar is in nav html file  without any html or body tag  only the code for navigation bar   In the target page  this goes in the head tag    lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt    Then in the body tag  a container is made with an unique id and a javascript block to load the nav html into the container  as follows    lt  --Navigation bar-- gt   lt div id  nav-placeholder  gt    lt  div gt    lt script gt    function          nav-placeholder   load  nav html         lt  script gt   lt  --end of Navigation bar-- gt

[html] How can I reuse a navigation bar on multiple pages?

Examples related to html

Examples related to navbar