This video tutorial provides an overview on how you can add a professional-looking navigation menu, complete with mouse-over hover effects, to your website using the free Nvu web editor. It uses the free CSS Menu Buttons Wizard on thesitewizard.com.
If you don't already have Nvu, you can find it (among other free web editors) listed on the Free HTML Editors and WYSIWYG Web Editors page. If you need to learn how to use Nvu to create your own website, please see my Nvu tutorial How to Create and Publish Your Website with Nvu.
The menu you create will have mouse-over or hover effects. If you are not sure what this means, try moving your mouse over the buttons on the side panel of this page. As you move your button, you will notice that the button changes appearance/colour. The buttons that you create using this how-to guide will have the same effects, although you can customize the colours to suit the theme of your website.
If you prefer to read a tutorial on how to add the CSS menu to your website with Nvu, please see the article How to Add a CSS Navigation Button Menu to Your Site with Nvu instead. Since the video is merely a screencast, and has no audio, if you rely on audio (eg, if you are visually impaired), please read the article instead. Your screen reader will be able to handle the article better than the video.
This video tutorial requires a recent version of the Flash player. If you have difficulty getting the video embedded below to work, try viewing it directly on YouTube, which is where this video is hosted.
Update: the CSS Menu Buttons Wizard has been updated since this video tutorial. The video tells you that you need to enter your site's web address (URL) into the wizard. This is no longer needed, so don't worry if you can't find the field "Main URL of your website" as shown in the video. There's no such field any more.
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: