horse hair horse hair - 1 year ago 58
CSS Question

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?

Answer Source


<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>

Put your content in to each list item above.



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 where you can find other examples too.