CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 2405

Website - Is it possible to set links in a central location?

I'm currently in the process of redoing a website and all of my pages are going to have a common navigation bar at the top:

Little snippet of the code I'm talking about:

<div id="logoNavContainer">
    <nav>
        <ul>
            <li><a href="contentPage.html" class="glow">Services</a></li>
            <li><a href="contentPage.html" class="glow">Products</a></li>
            <li><a href="contentPage.html" class="glow">Training</a></li>
            <li><a href="contentPage.html" class="glow">Technology</a></li>
            <li><a href="contentPage.html" class="glow">Clients</a></li>
            <li><a href="publications.html" class="glow">Publications</a></li>
            <li><a href="contentPage.html" class="glow">Contact Us</a></li>
        </ul>
    </nav>
</div>

Initially when I was coding this I was (and still am if it is possible) thinking it would be really convenient if I could have my mainTemplate.html for each page and then for their individual content, create a separate .html page that would be displayed within the correct area on the mainTemplate.

That way any changes to the navBar, links, background etc. Could be done from one location, which is something that I feel might exist due to the purpose of CSS.

But, as it is I simply have identical HTML code at the start of each page for the navbar but at least it is all styled by one CSS form.

So I (and future programmers) can edit the style for all pages from one spot.

Now that I'm implementing each page I am noticing that I have to go through increasingly more pages to change the navBar links, and it is the same action each time.

I was wondering if it is possible to set a variable or something in each html file (like in Java) which is set in one location so that all the links can be swapped out at once?

I'm just trying to make changes easier, and eliminate redundancy. I'm quite new to Html and CSS so I feel like I could be missing a very obvious solution.

Also if the original idea I had IS possible, I would much prefer this solution as it solves more than one problem, and eliminates scores of redundant code.

Thanks in advance.

Upvotes: 1

Views: 167

Answers (4)

Alex
Alex

Reputation: 2405

Okay, I worked at this for a while; researching each of your answers and trying to work it into my code.

The PHP I am completely unfamiliar with, so I didn't get anywhere playing with it and although I worked with javascript I gave up on that as well.

Until I came back and saw Rachel G's updated answer. I used that combined with a discussion on generating html with javascript along with my own piece of javascript I managed to work out a functioning version of exactly what I wanted!

Here is how the HTML that I now include at the beginning of every page:

<!doctype html> 
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link href="styleSheet.css" rel="styleSheet" />
            <script src="pageFeatures.js" type="text/javascript"></script>
        </head>

<body onload="init('tabs')">

    <div id="main-container">
        <div id="navBar">
            <!-- Loaded through Javascript; eliminates repeated code and all navBar Links are now set in one place -->
        </div>
       .... All page specific code.

And the javascript that creates the navBar:

The Links:

// Links
var servicesPage = 'designAudit.html';
var productsPage = 'pageTemplate.html';
var trainingPage = 'pageTemplate.html';
var technologyPage = 'pageTemplate.html';
var clientsPage = 'pageTemplate.html';
var publicationsPage = 'publications.html';
var contactPage = 'pageTemplate.html';

The Init()

function init(tabs) {
    initNavBar();
    if (tabs == 'tabs') {
      initTabs();
    }
}

InitNavBar()

// BEGIN NAVBAR GENERATING CODE
function initNavBar() {
  var navBar = document.getElementById("navBar");

  var navContainer = document.createElement("div");
  navContainer.setAttribute('id','logoNavContainer');
      var header = document.createElement("header");
          var h1 = document.createElement("h1");
              var logo = document.createElement("a");
              logo.setAttribute('href','index.html');
          h1.appendChild(logo);

          var nav = document.createElement("nav");
            var ul = document.createElement("ul");
              var link1 = createLink(servicesPage, "Services");
              var link2 = createLink(productsPage, "Products");
              var link3 = createLink(trainingPage, "Training");
              var link4 = createLink(technologyPage, "Technology");
              var link5 = createLink(clientsPage, "Clients");
              var link6 = createLink(publicationsPage, "Publications");
              var link7 = createLink(contactPage, "Contact");

            ul.appendChild(link1);
            ul.appendChild(link2);
            ul.appendChild(link3);
            ul.appendChild(link4);
            ul.appendChild(link5);
            ul.appendChild(link6);
            ul.appendChild(link7);
      nav.appendChild(ul);
    header.appendChild(h1);
    header.appendChild(nav);
  navContainer.appendChild(header);

  navBar.appendChild(navContainer);
}

createLink()

// Indented to Represent Html layering.
function createLink(destPage, text) {
  var link = document.createElement("li");        // <li>
    var linkAnchor = document.createElement("a");   //    <a>
    linkAnchor.setAttribute('href', destPage);      //    <a href="">
    linkAnchor.setAttribute('class','glow');      //    <a href="" class="glow">
      var services = document.createTextNode(text); //    <a href="" class="glow">Text
    linkAnchor.appendChild(services);         //    </a>
  link.appendChild(linkAnchor);             // <li>
  return link;
}

Anyways, thanks for the assistance. I thought I would post the solution I came up with as it differs quite significantly from what's here.

One question I do have though, if anyone checks over this, is This completely leaves my site to die an aesthetic if the client's browser doesn't have it. Is this something that is likely to happen?

I know I have never personally used a computer without javascript but the world usually isn't that simple.

Upvotes: 0

Snowy Coder Girl
Snowy Coder Girl

Reputation: 5518

You can see this article. Pure HTML does not support includes. The article includes a JavaScript solution you can use (see below for an excerpt).

One Option

So for your code, you could do:

var navigationDiv = "<div id='logoNavContainer'>" +
                        "<nav>" +
                            "<ul>" +
                                "<li><a href='contentPage.html' class='glow'>Services</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Products</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Training</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Technology</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Clients</a></li>" +
                                "<li><a href='publications.html' class='glow'>Publications</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Contact Us</a></li>" +
                            "</ul>" +
                        "</nav>" +
                    "</div>";
document.write(navigationDiv);

Upvotes: 1

Peter
Peter

Reputation: 361

The very dirty solution:

Create mymenu.js with the content:

document.write("<div id='logoNavContainer'><nav><ul><li><a href='contentPage.html' class='glow'>Services</a></li></ul></nav></div>");

In all html you want to give navbar include this:

<script src="mymenu.js"></script>

Hope it helps! Peter

Upvotes: 0

kaoD
kaoD

Reputation: 1582

In pure HTML that's not possible. There are two possible solutions that I can think of right now:

Preprocessing You can serve your static HTML page using any processor like PHP. This is the best approach in my opinion. It will only require you to call include('header.html') and the header will be included. This is how it's done everywhere.

JavaScript You can also load the navbar from a different location using JavaScript. The downside here is that it will requiere two requests per page and you'll have to put up some kind of loading animation until the navbar is loaded.

EDIT: I just realized you can use frames/iframes in pure HTML. Bear in mind I didn't come up with frames in the first place because... well, frames suck :)

Upvotes: 1

Related Questions