Making an External Navigation Bar with JavaScript

If your webpage is anything like mine, it probably has more than just a few pages. This can become both an annoying and time-consuming chore to keep it maintained with a properly updated navigation component. One way that you can solve this problem is with the use of an external JavaScript navigation bar. This way, only one file needs to be updated to make the changes appear site-wide, much like an external CSS stylesheet.

To start, we’re going to create an external JavaScript (.js) file. For this tutorial, let’s call it “NavLinks.js”.

Creating a new JavaScript document in Dreamweaver CS5.

The "New JavaScript" option, right under "File>New"

Now, we’re going to start writing the script. It’s an easy one, so don’t worry if you’re not much of a programmer! Basically, we’re going to tell JavaScript to insert a few lines of code into the HTML document.

Declaring variables in the JavaScript document.

Declaring variables in the JavaScript document.

Here, we’re telling JavaScript this variable (var) named “lnk” is going to be filled with ”, or something that hasn’t been defined quite yet. We’ll do that by, in effect, “adding” to this variable we call “lnk” with a few plus signs. (By the way, “lnk” is short for “link”, which I avoided using because it could cause problems with scripts.)

Here, we add all of the things we want the browser to read to be injected by JavaScript.

Adding to our previously defined variable.

Look familiar? That’s because that’s all HTML code that’s simply going to be inserted into your HTML document via JavaScript. This is how we finally accomplish this task:

writing links into the HTML document.

Writing the links into the HTML document.

This command will write our previously defined variable into the HTML document wherever you place the JavaScript link. Since that’s kind of important to what we aim to accomplish with this tutorial, let’s go ahead and do that now. (Remember to save this .js file into your site root folder!

inserting the JavaScript link for the navigation bar.

Our link to the JavaScript navigation file in the HTML document.

Now, save and you’re done! Just to be sure, let’s check our work:

Webpage with brand new JavaScript navigation bar.

Our webpage, complete with a shiny new JavaScript navigation bar.

And there you have it, your own external navigation bar, courtesy of JavaScript! Now, you can edit links across your website by simply editing just one file. All you have to do is change the link code in the JavaScript file! Need to add a link? That’s easy too!

JavaScript HTML code insertion

To edit this, just modify the blue text. To make a new navigation link entirely, copy an entire line and then just change the blue text as needed.

One final thing: you may notice that if  you’re using a web editor like Dreamweaver, the navigation bar won’t show up. This is completely normal because JavaScript works on runtime, meaning your navigation bar likely won’t show up in an editor. Fear not, it’s still there!

Ryan Craig

~ by Ryan Craig on October 23, 2011.

7 Responses to “Making an External Navigation Bar with JavaScript”

  1. the screen shots which shows the start of creating a new html file followed by the html code of declraring variables in the javascript helps you understand the code process needed to follow the following steps in your tutorial. both aspects of this tutorial, the visual followed by the html allow for people, who may not understand the issues addresesed in this tutorial which is the making of the external nav bar, to be able to use these steps and create said nav bar.
    jake sam

  2. Your use of diction really caught my eye in this blog! It was interactive which make it exciting and painless to follow. The photos of the html language along with the typed captions on the photos made this simplistic and smooth. JavaScript is a program I am unfamiliar and this blog broke it down in an uncomplicated process. I usually use an html tag to make a nav bar, but I like that you demonstrated the use of JavaScript because I was unaware of this method before and will have to try it out!
    Alyssa Ferguson

  3. I enjoyed this post very much not just for the topic, but for the rhetoric used to explain it. Formulating a nav bar is often a very stale and difficult to grasp concept that involves multiple steps that can easily complicate the reader, from the most basic to the advanced website designer. I know from experience that it’s frustrating and takes a lot of time to master correctly, and the writer’s use of conversational rhetoric established a connection between myself and the content of the post that helped add clarity to the content. The writer used well defined pictures that only showed what was pertinent to the formulation of the navigation bar without the over embellished–which helped make it more appealing to even the most basic HTML/CSS editors.

  4. This blog caught my eye because of all of the screen shots. There are many pictures that easily guide you through the process and precise enough that I could understand what to do without reading the actual post. This post also stuck out to me because of the end. Not only was the beginning of the blog very detailed and to the point but the end told you how to check if you did your work correctly. The only thing that could be done a little better, would be if some of the screen shots were larger and easier to see. Otherwise, this blog was very well done and any one could follow the steps.
    Alyssa Scalercio

  5. I REALLLY liked this post. You have such a great writing attitude that it makes it so that anyone with any skill level can complete this task! You had a very informal writing style that makes me feel comfortable and doesn’t confuse me. I really like all the pictures that you included with the step by step easy instructions. The pictures of the java script writing make sure that i write the code the right way and that I don’t miss a punctutation mark.

    This might be the best post of the week!

    Kristen Rupnik

  6. This is a really great post. The html for my navigation bar is pretty out of control, so this is an awesome trick that I wish I knew earlier. Not only were you very helpful and specific, you also used a friendly inviting tone. You even anticipated the mistakes and concerns readers might have, which is always a good thing to include in blog posts. It’s almost like your answering questions before they are asked! Great job!

  7. Thank you for this post! It’s always a chore to go through all of your pages and change the navigation, so this is great. (Your title is what made me read this post). Your encouraging tone is great to keep readers engaged and not get lost. It’s a little thing, but it’s huge that you mentioned this won’t show up in Dreamweaver. It’s something that anyone would get frustrated over, and it seems like you’ve covered all the possible issues someone might run into. Programming is pretty daunting, but you’ve walked us through it very well!

    -Nico Dyll

Comments are closed.

%d bloggers like this: