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