How to Add a CSS Navigation Button Menu to Your Site with Nvu (www.imagination.gs)

(www.imagination.gs) Nowadays, its 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, Nvu. Requirements Obviously you will need Nvu and have a basic understanding of how to start up Nvu and use it for simple operations. If you are new to this, and wish to learn how to get and use Nvu, please read my beginners Nvu tutorial How to Design and Publish Your Website with Nvu at http://www.thesitewizard.com/gettingstarted/nvu1.shtml How to Create a Button Menu with Rollover Menu Buttons 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 hearts content. The wizard does all the hard work for us, by generating everything you need for the button menu. Saving the CSS Code for the Navigation 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 modify the name of your file without telling you. 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. Close your text editor (Notepad or otherwise). You wont need it any more. Modifying the HEAD Section of Your Web Page Start up Nvu and load the page you want to modify. At the bottom of the Nvu window, click the "Source" tab. Nvu 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 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 Nvu. Click your mouse in the space immediately after the word "" (on the same line). Hit the ENTER key (or RETURN key on the Mac). This will create a new blank line after the 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 Nvu window. Click the "Normal" tab button at the bottom of the Nvu window to return to WYSIWYG view of your web page. Inserting the Button Menu HTML Code into Your Web Page Move your cursor in Nvu 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 Nvu. 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 youre done. 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 Nvu, check the first chapter of the Nvu 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 your menu there. Technical Note: Nvu has some bugs in this area, so chances are that you will not see the menu as it should appear in the web editor. Dont worry; your page will show up correctly in a real browser. 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 Wizards 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 dont 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. by Christopher Heng, (www.imagination.gs)