Many websites have a navigation menu on all their pages. The menu typically have buttons that link to the important pages or main sections of the site. This chapter of the BlueGriffon tutorial shows you how you can insert such a navigation menu into your web page.
Obligatory note: if you have arrived at this article from outside thesitewizard.com, you may want to start from chapter 1 of the BlueGriffon tutorial, since this guide assumes that you have done all the steps suggested earlier. In fact, if you have never made a website before, you may find it helpful to start at the very beginning, with the article How to Design or Create a Website.
By the end of this chapter, you will have inserted a navigation menu with buttons linking to the other pages of your website. You will also find out how to add and remove buttons from it so that you can adjust your menu as your website grows.
If you were to compare the complete list of pages on thesitewizard.com with the items actually placed on its navigation menu (which you can see by looking at the buttons in the left column of this very page you're reading), you will notice that I don't list every article in the menu. In fact, if you had actually bothered to look at my site map (don't worry if you didn't), you will realise that it's neither practical nor useful to put buttons to pointing to every article, since, at the time I write this, thesitewizard.com has more than 500 pages.
Unless you plan to only have a few pages for the entire life of your website, chances are that you will end up having to do the same thing I did when I created my site: decide which pages go into the navigation menu, and which to leave out.
One way to do this is to take your inspiration from other sites. I mean, the vast majority of websites have more pages than can fit into a menu occupying a single column. For my part, I decided to place links to only the main pages (such as the home page, site map and feedback form) and sections of thesitewizard.com. It's possible that even my list of main sections isn't complete, but I had to draw the line somewhere. If I listed every possible thing in that menu, it would be too long.
If it's too early for you to tell what pages you want on your site, or you simply cannot decide, create a menu with buttons linking to at least these three pages: your home page, your site map and your feedback (or contact) form. I will also cover how you can add new buttons to your menu should your site expands beyond these basic links.
To speed things up, you will use thesitewizard.com's CSS navigation menu wizard to do the heavy lifting (so to speak). In case you're wondering, a "wizard" is programming lingo for a user interface that hand-holds you through the process of doing something. You specify the type and colour ("color" if you use a different variant of English) of menu you want, tell it how many buttons you need, and it will generate all the necessary code for you.
Go to the CSS navigation menu wizard.
Don't worry. It's free.
Scroll down the page till you see the "Step 1 of 2" section.
Make sure that radio button for "Create a vertical menu bar" is selected, as it should be by default, then click the down arrow button on the box for "How many menu buttons do you want?" and select the number of buttons you want. As mentioned earlier, if you can't decide, just select "3". If you need more than 20 buttons, just select 20. You can always add more buttons (or delete buttons that you don't want) later on using BlueGriffon, so there's no need to get stuck here mulling over how many buttons you'll ultimately need.
Then click the "Next» Go to Step 2" button.
Some default colour schemes are provided by the Wizard. Move your mouse over each of the buttons to see the colours they change to when a mouse pointer hovers over them. The "Blue 1" colour scheme is the one currently used on thesitewizard.com (at least at the time I write this), and the "Orange" colour scheme is used for thefreecountry.com. If you want to use one of these colour schemes for your menu, click the button for that scheme.
Otherwise, you will have to design your own scheme. You can do that by changing the colours in the various fields in the "Your Own Colour Scheme (for Advanced Webmasters Only)" section. This can be done by clicking the colour for each field (see the picture below, which shows the fields after I clicked the "Blue 1" scheme). Each colour next to the description is actually a clickable button. A colour picker specific to your browser will appear when you do this, allowing you to choose a new colour.
On the other hand, if you see text for each field, like that shown in the picture below, it means that your browser does not support the colour picker. In such a case, you will have to manually enter the numeric values for the colour you want. (Although you may see letters of the alphabet in those fields, they are actually numeric, since the numbers are not in decimal, but base 16, that is, 0 to 9 followed by A to F.)
Since it's unlikely that you will know the numeric values of the colours by heart, you will probably need to refer to a list of colours and their associated values. One possible reference is Wikipedia's list of colours. Look for the colour you want, then copy the value given in the "Hex (RGB)" column and paste it into the relevant field in the Wizard. Do not use the colour names or the HSL values, only the hexadecimal RGB ones.
If all this is too much trouble (or too hard), just choose one of the stock colour schemes.
By default, the button is set to 180 pixels in width. However, since your left column is only 160 pixels wide (if you have followed the procedure given in chapter 1), you should change that number to "150px" (without the quotes). Note that there must be no space between your number and the "px" unit of measure, and do not change the spelling of "px" (that is, don't be clever and think that you can specify "pixels"; your visitors' web browsers won't recognise "pixels" as a valid unit). Just replace "180px" with "150px".
In the section entitled "Button Text and URLs", enter the label you want on each of your button, along with the corresponding web address.
For example, if you are creating buttons for your home page, site map and feedback form, you can use the
suggestions below. Be sure to substitute your actual web address for "www.example.com" before
using the URLs below.
Text on Button 1: "Home" (without the quotes); URL: "http://www.example.com/" (without the quotes).
Text on Button 2: "Contact" (without the quotes); URL: "http://www.example.com/feedback.html" (without the quotes).
Text on Button 3: "Site Map" (without the quotes); URL: "http://www.example.com/sitemap.html" (without the quotes).
Note: I suggest that you use the filename of "feedback.html" for your feedback form as suggested above.
This will make your life easier when you create your form in chapter 8, since that is the name that I will assume you
used. You can say whatever you want (eg, "Feedback Form", "Contact Form", "Support"
or whatever) for the "Text on Button 2", but make sure that the URL for that button has a filename
of "feedback.html". For example, if your website has an address of "http://www.new.example.com/",
the URL for the form should be "http://www.new.example.com/feedback.html".
Just ignore "Target frame". It doesn't apply to the site you are creating in this tutorial series.
Read the terms of use in this section, and if you agree to them, click the checkbox provided.
When you're done, click "Generate buttons" to get the code.
You will need to use a plain text editor on your computer for the next step. Windows systems come with a program called Notepad for this purpose, and I understand that Mac OS X systems come with TextEdit.
Note: under no circumstances should you use a word processor like Microsoft Word, Wordpad, OpenOffice, LibreOffice or the like for the next step. If the program you're thinking of running allows you to do things like underline text, create bold text, or anything fancy, then it's the wrong program.
Leave your browser window open and start up the plain text editor. If you use Windows Vista and above, this can be done by clicking the Start menu (ie, the round button at the bottom left of the screen), and typing "notepad" (without the quotes). As you type, you should see the words "Notepad" appear (along with its icon) at the top of the start menu. Click it.
This will open a nondescript window with a menu bar that says something like "File Edit Format View Help" and a blank white surface under that. Leave this window open.
If you use a Mac, you will have to figure out how to start TextEdit yourself. (I don't have a Mac, so I have no idea how to help you here.)
Switch back to your web browser. You should see a section called "Cascading Style Sheet (CSS) Code" near the top of the page. Click anywhere in the box located in that section. The contents of the box should automatically be highlighted. Make sure your mouse pointer is in that section, and click the right mouse button. A menu should appear. Click the line that says "Copy" in that menu.
Switch to the text editor window that you opened in the previous step. Click "Edit | Paste" from the menu (ie, click "Edit" on the menu bar followed by the "Paste" line in the menu that drops down). The code that you copied earlier should now appear in the text editor.
Now click "File | Save". A window should open. Navigate to your website folder, to the location where you saved your home page ("index.html"), and type "tswnavbar.css" (including the quotes if you're using Notepad) into the "File name" field. Note the following: firstly, the "tswnavbar.css" file must be saved in the same directory as your home page (your "index.html" file). Secondly, if you're using Notepad, you have to include the quotes in the filename, because if you don't, Notepad will save it as "tswnavbar.css.txt" behind your back, and you won't be able to spot your mistake in Windows by default unless you've configured Windows to show you the full filename.
Click the "Save" button.
You can now close your text editor. You won't need it any more for this chapter. It was only needed to save your CSS code.
Now click your mouse in the box under the heading "HTML Code for the <HEAD> Section" of the Wizard. The text will automatically be highlighted. Right click the text and select "Copy" from the menu that appears.
Start up BlueGriffon and load the home page that you have created in the previous chapters.
Click the "Source" button located near the bottom of the BlueGriffon window (just below your web page). This switches the display from the pretty What You See Is What You Get ("WYSIWYG" for short) view to the actual code that comprises your page.
Scroll up to the top of the page. You can do this by either clicking the scroll bar on the right side of the window or using "PgUp" on your keyboard.
The fifth line (or thereabouts) from the top should have the title you set for your home page in chapter 1. It should
read something like "<title>Example Co</title>" (with the words "Example Co" replaced by whatever
you typed for the title of your page).
Put your cursor someone on the line by clicking your mouse while the pointer is positioned somewhere there. Then,
using the arrow keys on your keyboard, move the text cursor so that it is located after the last character of that line.
That is, the cursor should be after the final "</title>" text on the same line.
Now hit ENTER (or RETURN if you use a Mac) on your keyboard.
A new, blank line should appear. Don't worry if your cursor is indented neatly under the "<title>" of
the previous line. That's not important.
Click "Edit | Paste" from the menu.
The line you copied earlier from this article should appear.
Click the "Wysiwyg" button at the bottom of the BlueGriffon window. You will see your web page (as a browser displays it) again, although, disappointingly, with no visible changes. That will come with the next step.
Switch to your web browser and click the box in the section "HTML Menu Button Code". As before, the code will be automatically highlighted. Right click the code again to get the right button menu, and click "Copy".
Switch back to BlueGriffon.
Click your mouse pointer somewhere in the words "NAVIGATION PANE" in the left column to put your text cursor there. Then, using the arrow keys on your keyboard again, move the cursor so that it is located after "PANE". Don't delete anything yet. We'll do that later after we insert the menu.
Hit the ENTER key to create a new line.
Now click the "Source" button to return to the source view. Click "Edit | Paste" to insert the menu code.
Click the "Wysiwyg" button.
You should see the navigation menu in your left column. You can now proceed to delete the words "NAVIGATION PANE" at the top. (That is, use the arrow keys to go to those words, and hit the Delete or Backspace key to get rid of them.)
You do not have to go back to the Navigation Menu Wizard every time you want to add a new button. It can be done from within BlueGriffon.
Click to put your cursor on the button that is just above the new one that you want to create.
Hit the ENTER (or RETURN) key. A new line will appear. The line will not have the appearance of a button at the moment. This will be fixed when you complete the next 2 steps.
Type the text that you want the button to show. For example, if you want to create an "About Us" page, type "About Us" (without the quotes).
Drag your mouse over the new words that you typed to select it. Click "Insert | Link". When the "Links" dialog box appears, change the link in the "Target" field to the URL you want, for example, "http://www.example.com/aboutus.html" (without the quotes), and click "OK".
The new line will now take on the appearance of the other buttons in the menu. If this is not the last button in your menu, you may or may not see a gap between that button and the ones below. Ignore it. The gap will disappear when you save your file (eg by using "File | Save" from the menu).
You can delete a button the usual way you delete any piece of text on your web page. Just position the cursor on the button in question, and use the Delete or Backspace key on the words until the entire line is gone. Yes, it's that simple.
To test your navigation menu, upload your website with FileZilla, remembering to also upload the "tswnavbar.css" file. The "tswnavbar.css" file is to be uploaded to the same folder (ie, directory) as your home page.
Start up a web browser and open your website. Your page should show the menu as it did in BlueGriffon. If you see your menu as a list of bullet point links, it means you either failed to upload "tswnavbar.css" or uploaded it to the wrong folder.
You can test the links on your menu if you wish, but it's probably pointless to do it at this point since you haven't created any of the other pages on your site. (You'll just get an error message saying "404 File Not Found" or words to that effect.) The only button that works (sort of) at the moment is the "Home" button, which should take you back to the page that you're viewing. (Actually, chances are that your web browser will detect that it's the same page, and not even bother to do anything.)
In the next chapter, you will create the rest of your website (except for the feedback form, which will be dealt with in chapter 8).
Copyright © 2015-2021 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add a Navigation Menu to Your Website Using BlueGriffon
