Creating a better NavBar
Things you need
•
An Object with a Name UsesJQuery, in case
your site is not using animation effects.
•
A little amount of JavaScript code that can
be added to the Website and forgotten.
•
A method of firing up the code that Xara
already provides for in Web Properties > Link.
•
Using Names with a special label, htmlclass,
for the Menu items.
UsesJQuery
Names: UsesJQuery
Web Properties > Website
> HTML Code (body):
Web Properties > Link:
javascript: open('.ASub,
.ASubSub2');
Names: htmlclass="Menu
ASubSub2"
Creating a NavBar Style
Things you need
•
A collection of Objects that are a button
shape, the button text and any rollover ef-
fect you require.
•
To avoid lots of graphics, I chose to use:
o
MouseOff Rounded Rectangle with Left-
aligned Text Column
o
Cloned to MouseOver with colour changes.
o
All soft-grouped with a simple # Link.
o
Add a Name that reflect the Item’s
hierarchy.
•
You can use any existing button or collection
of objects as a button in your design. There
is no limit.
Menu ASub 1
Menu ASub 3
Menu ASub 2
Activating your NavBar
Things you need
•
The SubMenu Items ClassName includes
“Menu” to hide the SubMenus until called.
•
The ClassNames place the Menu Items in the
correct hierarchical position; e.g., “ASub”.
•
In our top example, the parent Menu Item
(MenuA) has a calling link of “javascript:
open (’.ASub’);”; the “.” is the convention that
says the following text is the ClassName.
•
The Menu Item Labels are altered to your
needs but the underlying calls and names
stay unique as explained. Check the differ-
ences for MenuB and MenuC.
•
Play with all the available buttons in any
order and look at their Link code to gain a
better insight.