How to Add a CSS Navigation Button Menu to Your Site with KompoZer

Add a button menu with rollover / mouseover effects


How to Add a CSS Navigation Button Menu to Your Site with KompoZer

by Christopher Heng, thesitewizard.com

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.

Requirements

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 How to Design and Publish Your Website with KompoZer at http://www.thesitewizard.com/gettingstarted/kompozer-tutorial-1.shtml

How to Create a Button Menu with Rollover Menu Buttons

  1. Creating the Navigation Menu Button CSS and HTML Code

    Go to the CSS Navigation Menu Bar Buttons Wizard at http://www.thesitewizard.com/wizards/css-menu-buttons.shtml 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.

  2. Saving the CSS Code for the Navigation Menu

    1. 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".

    2. 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).

    3. Click your right mouse button inside the box again. Select the "Copy" item in the menu that pops up.

    4. Switch back to the text editor (Notepad or the like) that you started up earlier.

    5. Paste the contents into the editor. To do this in Notepad, click the "Edit" menu at the top of the window and select "Paste".

    6. 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 the main page of your website. For example, if your main page was saved in the folder "c:\my-website", save your CSS file in that same directory.

    7. Close your text editor (Notepad or otherwise). You won't need it any more.

  3. Modifying the HEAD Section of Your Web Page

    1. Start up KompoZer and load the page you want to modify.

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

    3. Switch back to your browser. Scroll to the section "HTML Code for the <HEAD> Section" in the Wizard.

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

    5. Click the right mouse button again, and click "Copy" from the pop-up menu.

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

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

    8. Click the "Normal" tab button at the bottom of the KompoZer window to return to WYSIWYG view of your web page.

  4. Inserting the Button Menu HTML Code into Your Web Page

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

    2. 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.)

    3. 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".

    4. Click the "Insert" button when you're done.

    5. The menu will not show up correctly at this point. To see the menu as it should appear, you will have to upload or publish your pages to your website. 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.

    6. After publishing, load your web page in your browser, and you should be able to see your menu there.

      Technical Note: KompoZer has some issues in this area, so chances are that you will not see the menu as it should appear in the web editor. Don't worry. Your page will show up correctly in a real browser.


  5. Linking to thesitewizard.com

    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:

    Free Site Design Tips and Tutorials at thesitewizard.com

    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.

Conclusion

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-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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 http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a CSS Navigation Button Menu to Your Site with KompoZer





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.