Creating a Navbar with menus in Menu Maker

Menu Maker makes a breeze of creating a customized web page navigation bar with cascading menus (like the example at the top of this page). This usually very tricky task takes just a few simple steps to complete in Menu Maker.

This tutorial will show you how to create a navigation bar (NavBar) and menu from within Menu Maker. To learn how to create a NavBar bar from within Macromedia Dreamweaver of Microsoft Frontpage, click here.

Step 1 - Getting started

To start, select "Click to start - Choose a Design" from the main screen.

Now I can see all of the NavBar designs available in Menu Maker. I can simply scroll through the choices by clicking the arrows at the top right-hand side of the dialog box. Since I am going to add a menu to my NavBar, I want to chose a simple design.

Now I can edit my graphic by clicking the buttons down the left hand side, which will open the editing dialogs. As I make changes the image will be instantly updated in the preview window, making experimentation easy.

Step 2 - Customizing the button text and colors of the Navbar buttons

To start creating my custom NavBar I want to change the appearance of the font and the color of my buttons, so I click Text which opens the text editing dialog. To change the font, simply select the text to change, then select the new font. The Advanced Text Dialog gives complete control over the position of the text, tracking, line spacing and aspect ratio.

Changing the colors is just as easy. Simply click Color, select the part of the graphic to change, then choose the new colors. It's the same procedure for all of the elements of a graphic. Also, all of the changes take place instantly and can be viewed in the preview window.

Step 3 - Adding buttons and menus to my NavBar

Next I want to add some buttons, change the button text and create some new menus. So I click NavBars.

To create a New button, I simply double-click the blue 'Click to Add Button' text and type my button text. A new button will automatically be created. I can do the same to create menus and sub-menus. At any time, I can re-arrange the ordering of the buttons or the menus simply by dragging and dropping them to a new location or I can delete them by selecting the button or menu and clicking Delete.

I can change the button text by double clicking and simply typing in the new text. URLs, target windows and Alt text can be added in the same way, simply double click and type.

Step 4 - Customizing Menus

The controls for the menu text and behavior are located in the Menu Properties area. Here, I can set the menu font (as a brief technical aside, the text on menus is different from the text on buttons. The buttons in our NavBar are graphics whereas the menus are purely HTML - which means that the fonts you can use for a menu are limited to a short list of 'browser safe' fonts, which are shown in this drop down menu). I can also set the font size, bold or italic, menu spacing, the direction the menu will open and how fast it appears and whether I want it to be semi-transparent.

Step 5 - Exporting the finished NavBar

Once I have completed the changes to my NavBar, it's time to export it. To save my NavBar and menus I just select the Save option. Menu Maker optimizes the graphics to be as small as possible and displays the size in both pixels and k. The Advanced Save Dialog also has options to change the number of colors, dithering and transparency. It's interactive and instant - the size figures and the image update as the settings are altered. No more trial and error!

I can preview my NavBar in a browser at this point if I want to or simply export it. It will be automatically saved with all the necessary HTML and Javascript.

And that's it, I've created my own custom NavBar with menus and it only took a couple of minutes. Here it is, saved out at only 16 colors!

To see more examples of the ease and power of Xara Menu Maker, check out our website at www.xara.com

____________