CODEWITHSUNDEEP
htmlcss
Ken - Enough about Monica
Ken - Enough about Monica

Reputation: 1690

How to implement a navbar with HTML / CSS

There are several examples of this on the net, using just HTML and CSS, or Bootstrap. They often have examples like this:

  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>

What I'd like is for the navbar to not have to load on each refresh / link click. Are the anchors in the example supposed to be replaced by links to other pages that include the full navbar source themselves?

What is a typical implementation, so that the navbar stays static?

How can I implement a static navbar between pages with HTML / CSS?

Upvotes: 1

Views: 775

Answers (4)

Cave Johnson
Cave Johnson

Reputation: 6788

Just wanted to give you another possible solution. I'm putting it in a separate answer since it is a different idea.

Basically you can use javascript to fire an ajax request every time a link is clicked. The request will return the HTML content that will be inserted into the page. Here is a demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <ul id="nav">
            <li><a target="#" href="page1.html">Tab1</a></li>
            <li><a target="#" href="page2.html">Tab2</a></li>
            <li><a target="#" href="page3.html">Tab3</a></li>
        </ul>
        <div id="pageContent">

        </div>
    </body>

    <script type="text/javascript">
        $("#nav li a").click(function() {
            $("#pageContent").load($(this).attr('href'));
            return false;
        });
    </script>
</html>

Note I am using jQuery since it makes it much easier but the idea is the same if you want to use a different library or just vanilla javascript. Basically it attaches a callback function to the links' click event and that function calls jQuery's load function to fetch the content of the page and insert it into the div. I think this approach is much more common and you can find it in a lot of popular websites.

Upvotes: 1

Cave Johnson
Cave Johnson

Reputation: 6788

One problem with the accepted answer is that the browser will have to load the content of all the tabs on page load. This may not be very good if your tabs have a lot of content and your users are using mobile devices. One way around that problem is using iframes. Here is an example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body>
        <ul>
            <li><a target="iframe" href="page1.html">Tab1</a></li>
            <li><a target="iframe" href="page2.html">Tab2</a></li>
            <li><a target="iframe" href="page3.html">Tab3</a></li>
        </ul>
        <iframe name="iframe" src="" onload="resizeIframe(this)" style="width:100%;"></iframe>
    </body>

    <script type="text/javascript">
    function resizeIframe(iframe) {
        iframe.style.height = 0;
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
    }
    </script>
</html>

This will load the content of each page into the iframe only when the link is clicked. Note that news.html, contact.html, and about.html have to be created as well.

Upvotes: 1

Razia sultana
Razia sultana

Reputation: 2221

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:300px;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

<ul>

  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Upvotes: 0

SomeGuy
SomeGuy

Reputation: 256

HTML

<ul class="w3-navbar">
  <li><a href="#" onclick="openCity('London')">London</a></li>
  <li><a href="#" onclick="openCity('Paris')">Paris</a></li>
  <li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>

Put your content in to each list item above.

JS

openCity("London");

function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    document.getElementById(cityName).style.display = "block"; 
}

First, call openCity() to open "London" (id="London).

Then call open City() with a different city name (id="Paris) when the user clicks on one of the buttons in the menu.

The openCity() function hides all elements (display="none") with the class name "city", and displays the element (display="block") with the given city id.

Sourced from http://www.w3schools.com/w3css/w3css_tabulators.asp where you can find other examples too.

Upvotes: 3

Related Questions