WEBSITE AND WEBSITE GRAPHICS CREATED WITH XARA XTREME PRO
H 1 2 3 4 5 Download Zipped Tutorial
Creating a Navigation Bar with Fly-out Sub-menus
Xara Web Designer 6 has a new and powerful Create Nav Bar tool that
simplifies the process of creating a navigation bar and includes the
ability to create drop down and fly out menus. The current page button
is automatically highlighted to
indicate that this is the page your
visitor is on. And the page links are
automatic, even if you change the
order of the pages.
In this tutorial we’ll create a vertical
navigation bar with fly out sub menus.
And we will preview a special Tweak
created especially for this Workbook
by the Tweakmeister, John Horn
My sketch on the left reflects the page
structure with four main pages and
five sub pages. A flow chart such as
this makes putting the website
together a lot easier.
Open the Page and Layer Gallery (F10). Select the title bar for the
index page and press New seven times to create seven new pages.
Click two times on the title bar for each new page (do not double click,
just click and click) to enable text editing. Edit each page name as
shown. These are all the pages represented in my site map sketch.
Don’t worry because the titles are all lowercase. We will changes these
when we create the navigation menu.
Make four squares and apply the
colors shown on the left. These colors
are from the screen palette.
Create a button rectangle, 110 pixels
wide by 20 pixels tall. Add the text
HOME in 13px Trebuchet MS caps. Use
the first two colors for the rectangle
and text. Center justify the text and
center on the rectangle and group.
Copy the button group to the clipboard (Ctrl c). Open the Page & Layer
Gallery (F10). Select the MouseOver layer for the index page and click
the red eye icon to make the MouseOver layer visible.
From the Edit menu, select Paste in Place. Drag a selection rectangle
around both buttons with the Selection Tool (the arrow pointer) and
from the Arrange menu, select Apply Soft Group. A soft group spans
several layers and soft grouped objects remain on these layers if you
copy and paste to another page.
Select the button soft group.
Mouse over the Website Properties icon and from the drop down menu,
select Create Navigation Bar.
Make the changes shown in the screen capture above
and press OK. A vertical button bar is created with 2
pixels of space between each button. If you preview
the site (Export and Preview Website), you will notice
that the current page is represented by a highlighted
button, this example, the About Us page.
Double click on the vertical navigation bar. This bypasses the Web
Properties dialog and goes directly to the Navigation Bar Properties
dialog. One by one, select the pages that will be sub menus and press
Delete until you just have the four main pages left. This includes the
MISCELLANEOUS page shown above.
Click the small + next button next to ABOUT US. A menu appears asking
you to double click to add menu. So, double click already!
The text New Item appears on a new line under ABOUT US. While the
text is still highlighted, change “New Item” to HISTORY. Click to the
right under About Us in the URL column. The Link dialog will open.
From the Link to Page: drop down menu, select History and press
Apply. The link now appears as shown above.
Repeat this step to add MAP and link MAP to Page: 4 (map)
Under OUR PRODUCTS, add new pages and page links for WIDGETS,
GADGETS, and MISCELLANEOUS. Remember to press Apply after each
change. Always remember to press Apply to make a change.
Preview the page and you can see the fly out sub menus.
The fly out menu is gray. Your Editor thinks the menu will appear more
integrated with the main menu if the colors match. We’ll achieve this
next and you will see why I had you make those four colored squares.
Double click on the menu to open the Navigation Bar Properties dialog.
Click the Menu Style button to open the Menu Style dialog.
Change the font to Trebuchet MS, and the Font Size: to 13px. Change
the Animation: speed to Slow. This makes the fly out menus open more
slowly and with greater effect. Do not close the menu yet.
There are five Colors: > Edit buttons (shown in the previous illustration)
that let you customize the color of the fly out menu and text. The first
two modify the fly out mouse down menu color and text color and the
second two change the fly out mouse over menu color and text color.
The last is for the outline color. We are not going to add an outline so
we are not concerned with this button.
Click each of the Edit buttons to change the color. The Color Editor
opens for you to modify the color. You cannot change the color by
clicking colors on the color palette. This is why I had you make the four
Drag the Color Picker (the eye dropper icon) from the Color Editor and
over the desired color.
When you have edited all four colors, press OK to close the Menu Style
dialog and press OK again to close the Navigation Properties dialog.
On the left, you can see the fly out menu now looks integrated with the
normal button bar. And the ABOUT US button is highlighted.
But on the right, is the the menu on the HISTORY page. The problem (or
opportunity if you are an optimist) is how to highlight every page, even
sub menu pages.
John Horn to the rescue!
John has devised a special Tweak just for this Workbook. And what it
does is automatically display the name of the current page. However, it
is not a perfect world. While John’s Page Name Tweak is pure genius,
there is a bit of work involved. I’ll explain in a moment.
First, create a new rectangle 110 pixels wide by 20
pixels tall, the same size as the buttons. Apply a flat,
Dark Magenta fill and delete the outline.
Then locate the file Page Name.xar in the ZIPPED tutorial folder. Drag it
onto the desktop, then drag and drop the file onto the page. Although it
is a XAR file, it is actually a Tweak. When you drag and drop the Page
name file onto the page, it will appear as shown above, in blue text.
You can format the text, but DO NOT CHANGE THE CHARACTERS!
Change the formatting as
follows: Change the font to
Trebuchet MS, 13px,
Center Justification, and
change the text color to
white. Center the text over
the dark magenta rectangle,
but move the text up so the
P is centered vertically on
the magenta rectangle.
Group the text and the rectangle and place it above the regular menu as
shown above. Select the magenta rectangle and then menu and Arrange
> Repeat on All Pages. Now preview your site.
The text in the magenta rectangle changes to indicate the current page,
even the sub menu pages.
And here is where I mentioned there was a problem. Because the text
on my menu is all caps, and because the Page Titles are lowercase, the
text on the buttons has changed to lower case. Ack!
The Page Title for each page needs to be changed to all caps in the Web
Properties > Page tabbed section. You have to do this one page at a
time. Then, as soon as you do this, the names in the Navigation Bar
Properties promptly change to lowercase and so, you have to go back
and redo all the Button and Menu names as shown above.
But the final results are well worth
the extra effort. The example on the
right shows the MAP page as the
current page. Click here to see the
menu bar in action.
In the Navigation Bar Properties dialog, Buttons and Menu section,
click twice on each button name, and edit the names to upper case.
If you refer back to my sketch, you will see that my button bar only has
four main buttons, Home, About Us, Products, and Contact Us. All the
other buttons are sub menus. How do we do that? I am glad you asked.