Nowadays, it's fairly common to see websites with a side or top navigation menu with buttons that change colour when you hover your mouse over them. This tutorial deals with how you can create such a navigation menu with buttons that show mouseover effects using the free WYSIWYG web editor, KompoZer.
Obviously you will need KompoZer and have a basic understanding of how to start up KompoZer and use it for simple operations. If you are new to this, and wish to learn how to get and use KompoZer, please read my beginner's KompoZer tutorial.
Go to the CSS Navigation Menu Bar Buttons Wizard and follow the instructions to create a button menu for your website. Customize the buttons using the wizard to your heart's content. The wizard does all the hard work for us, by generating everything you need for the button menu.
Without closing your browser, start up an ASCII editor. If you use Windows, you already have one on your system called "Notepad". To start Notepad, click the "Start" menu, followed by the "All Programs" (or "Programs") menu item, then the "Accessories" menu item. On that menu, click "Notepad".
Return to your web browser. Click your right mouse button somewhere inside the big box under the section "Cascading Style Sheet (CSS) Code". A menu will pop up. Click the "Select all" item on that menu. Everything inside that box should now be highlighted (selected).
Click your right mouse button inside the box again. Select the "Copy" item in the menu that pops up.
Switch back to the text editor (Notepad or the like) that you started up earlier.
Paste the contents into the editor. To do this in Notepad, click the "Edit" menu at the top of the window and select "Paste".
Now save the file with the name given in the Wizard. To find out the correct name, switch back to the browser window. The name of the file is stated in the paragraphs just above the box you copied earlier.
For example, to save the CSS file using Notepad, click the "File" menu, followed by the "Save As" item on the menu that appears. A dialog box will appear. In the "File name" field, enter the name given by the Wizard, including the quotes. For example, if the wizard told you to use the filename "tswnavbar.css" you must enter that name as given, including the quotes, otherwise Notepad will change the name of your file behind your back.
Remember to save the file in the same directory as web page using the menu. For example, if the web page was saved in the folder "c:\my-website", save your CSS file in that same directory.
Close your text editor (Notepad or otherwise). You won't need it any more.
Start up KompoZer and load the page you want to modify.
At the bottom of the KompoZer window, click the "Source" tab. KompoZer should now switch to Source view, where you can see the actual HTML source for your web page.
Switch back to your browser. Scroll to the section "HTML Code for the <HEAD> Section" in the Wizard.
Click your right mouse button in the box below that, and click "Select all" in the menu that appears. The text in the box should now be highlighted.
Click the right mouse button again, and click "Copy" from the pop-up menu.
Switch back to KompoZer. Click your mouse in the space immediately after the word "<head>" (on the same line). Hit the ENTER key (or RETURN key on the Mac). This will create a new blank line after the <head> tag.
From the menu, click "Edit" followed by "Paste" on the submenu that appears. The line that you copied earlier should be inserted into the KompoZer window.
Click the "Normal" tab button at the bottom of the KompoZer window to return to WYSIWYG view of your web page.
Move your cursor in KompoZer to the part of the page where you want to insert your menu. One way is to simply use the mouse to click on the spot you want.
Switch back to the browser window again and scroll down to "HTML Menu Button Code" section. Once again, select all the code in the box and copy it. (See above steps if you have forgotten how to do it.)
Return to KompoZer. Click the "Insert" menu, and select the "HTML" item. In the dialog box that appears, click your right mouse button in the box, and select "Paste".
Click the "Insert" button when you're done.
The menu may or may not show up correctly at this point. If it doesn't, you will have to upload or publish your pages to your website to see the changes. If you have forgotten how to do this in KompoZer, check the How to Design and Publish Your Website with KompoZer tutorial again. Make sure that the box "Include images and other files" is checked in your Publish Page settings.
After publishing, load your web page in your browser, and you should be able to see and test your menu there.
If you wish, and I will appreciate if you can do this, please also link to thesitewizard.com somewhere on your site. The code for linking using a "Powered by thesitewizard.com" button is given in the "Miscellaneous" section of the Wizard's output, and you can use the same method you used to insert the button menu HTML code above. The button looks like this:
If you don't like the button, you can link using any other code you want. Some suggestions are given on the Suggestions for Linking to Us page.
Congratulations. You have now added a professional-looking CSS/HTML navigation menu to your website. If you have not already done so, be sure to check out the appearance of your site using your browser.
Copyright © 2007-2018 by 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/.
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 CSS Navigation Button Menu to Your Site with KompoZer
