static navbar in all web page using javascript

Question

How can i make navbar static in all web page ?? i don't wont to rewrite it in every page ! can anyone give me the idea to do that in javascript !?

<nav class="navbar navbar-inverse">
<div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">eLibrary</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="add-librarian.html" >Add Librarian</a></li>
            <li><a href="view-librarian.html">View Librarian</a></li>
            <li><a href="index.html">Logout</a></li>
        </ul>

    </div>
</div>

Create a base View with your navbar in it and inherit this base view in all other views. — Ryan Wilson, Apr 27 '18 at 12:12

Toolbox · Answer 1 · 2018-04-27T13:11:43.400

Based on your question, the best solution would be to implement some PHP. Below is a server-side solution and PHP will in the background construct your HTML including the navigation.html. The browser code will not differ from a standard HTML code.

Follow these steps:

Step-1: Add your HTML navigation bar in a separate file, e.g.(navigation.html).
Step-2: Create a standard HTML file and rename the file to have .php suffix, let us call this file index.php.
Step-3: Open your index.php and add following line in the body area.
```
<?php include 'navigation.html' ?>
```

You have now your navigation bar text in one single place and spread out on your pages with above mentioned PHP. What the solution does is that by using PHP it allows you to import/inject HTML code into index.php.

Note! For this solution to work your need have PHP running and supported on your webserver. In case your attempt to run the solution on your local machine you need a solution for webserver with php, eg. XAMPP.

score 0 · Answer 2 · answered Apr 27 '18 at 12:16

0

Just add navbar-fixed-top in <div class="navbar-header">.

It should look like this: <div class="navbar-header, navbar-fixed-top">

I don't think you can write that in javascript, because JS is for dynamic websites and not for static websites...

Edit: You need bootstrap installed or imported for this, but I assume you already did that.

answered Apr 27 '18 at 12:16

You can theoretically write it in javascript by creating the needed divs and text structure (from Javascript). The backdraw is that you move away from the structure of having content in HTML, layout in CSS and intelligence in Javascript. A better solution is to solve it through PHP (see my answer). – Toolbox Apr 27 '18 at 13:23

score -1 · Accepted Answer · answered Apr 27 '18 at 12:17

Extract the navbar to a seperate file, e.g. navbar.html.

<nav class="navbar navbar-inverse">
<div class="container">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">eLibrary</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="add-librarian.html" >Add Librarian</a></li>
            <li><a href="view-librarian.html">View Librarian</a></li>
            <li><a href="index.html">Logout</a></li>
        </ul>

    </div>
</div>

Then add a div to your index.html(or whatever name your file has) with an id.

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

In you javascript execute this:

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

For this you have to import JQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

i thought that i should make a navbar in one page , and then i will change the content of page , for example when i click on the first item in navbar page 1 should load and when click on the second item page 2 should load and so on . Is this a bad idea? ؟! — ammar ammary, Apr 27 '18 at 12:25
@ammarammary It leads to the same result. You can do that too — Kokogino, Apr 27 '18 at 12:28

static navbar in all web page using javascript

3 Answers3