[All Adaptavist Apps]
...
The
...
menubar
...
macro
...
turns
...
a
...
bullet
...
list
...
(also
...
known
...
as
...
a
...
"hierarchical
...
list")
...
in
...
to
...
an
...
interactive
...
menu.
...
It's
...
Excerpt |
---|
...
an |
...
extremely |
...
powerful |
...
and |
...
flexible |
...
macro |
...
that |
...
allows |
...
you |
...
to |
...
create |
...
superb |
...
on-screen |
...
navigation |
...
tools |
...
...
you'll
...
find
...
almost
...
all
...
Builder
...
themed
...
sites
...
have
...
a
...
menu
...
bar
...
somewhere
...
on
...
the
...
screen.
...
This macro requires Theme Builder 2.0
...
or
...
above
...
and
...
will
...
only
...
work
...
in
...
a
...
space
...
that's
...
themed
...
with
...
Theme
...
Builder.
The most simple usage of the menubar macro is shown below:
Code Block |
---|
h2. Usage The most simple usage of the menubar macro is shown below: {code} {menubar:id=demo1} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menubar} {code} Which results in: {menubar:id=demo1} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menubar} The |
The "id"
...
parameter
...
is
...
absolutely
...
essential
...
for
...
the
...
menu
...
to
...
work,
...
and
...
it
...
must
...
be
...
unique
...
on
...
the
...
entire
...
web
...
page.
...
If
...
you
...
ever
...
get
...
a
...
menu
...
that
...
doesn't
...
work,
...
try
...
changing
...
the
...
value
...
of
...
the
...
"id"
...
parameter
...
to
...
something
...
else
Property | Required | Default | Notes | |
---|---|---|---|---|
id |
|
| This parameter must be specified, and it's value must be unique for the entire web page | |
electric |
| true | The following values are permitted:
| |
timeout |
| 250 | Defines the number of milliseconds to wait before menus are automatically shown when the "electric" parameter is set to true | |
vertical |
| false | The following values are permitted:
| |
context |
| false | menu is a context menu | |
class |
|
| CSS class to use | |
tooltips |
| true | The following values are permitted:
| |
shadows |
| 4,6 | This defines the horizontal and vertical offset of the shadows that appear behind pop-up menus and defaults to 4 pixels horizontal offset and 6 pixels vertical offset. To disable menu shadows, use a value of null | |
smooth |
| true | The following values are permitted:
| |
blink |
| false | The following values are permitted:
| |
lazy |
| false | The following values are permitted:
| |
toolbar |
| false | The following values are permitted:
| |
clone |
| false | clone source DOM objects | |
scrolling |
| true | The following values are permitted:
| |
flag |
| Content is shown if one or more of the specified flags are set. See Working with Flags for more details. | 3.3.6 | |
notflag |
| Content is shown if none of the specified flags are set. See Working with Flags for more details. | 3.3.6 |
Horizontal menus, like the one shown earlier in this page, are ideal for use in the following locations:
- Header panel
- Menu panel
- Navigation panel
- Title panel
- Footnotes panel
- Footer panel
- Inside content such as pages and news items
However, if you're thinking of putting a menu in to a sidebar, you should use a vertical menu, for example:
Code Block {menubar:id=demo2|vertical=true} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menubar}
Fun with Shadows
By default, shadows are shown on pop-up menus:
You can turn off the menu shadow by setting the value to null as shown below:
Code Block |
---|
{code} Which results in: {menubar:id=demo2|vertical=true} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menubar} For more information on using menus in sidebars, including changing the way they look within the sidebar, pelase see our tutorial on [USERGUIDE:Adding a menu to a sidebar]. {quote} h3. Fun with Shadows {quote} By default, shadows are shown on pop-up menus, as shown below: {menubar:id=demo3} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menu}Pop Up {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} You can turn off the menu shadow by setting the value to _null_ as shown below: {code} {menubar:id=demo4|shadows=null} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menu}Pop Up {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} {code} Which results in: {menubar:id=demo4|shadows=null} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menu}Pop Up {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} And you can also play around with the position of the shadows by altering their x,y offset, for example: {code} |
And you can also play around with the position of the shadows by altering their x,y offset, for example:
Code Block |
---|
{menubar:id=demo5|shadows=-4,-6} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menu}Pop Up {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} |
There is also a "smooth" setting, however we've never really noticed any difference between normal shadows and smooth shadows so you can probably set that to false in most cases
Electric Menus
No, this won't electrocute anyone who uses the menu. It's an (oddly named) setting that determines whether pop-up menus are automatically shown or not.
By setting "electric" to true, sub menus are automatically displayed when the mouse hovers over them or when they receive keyboard focus.
You can disable this effect by setting "electric" to false as shown below:
Code Block |
---|
{code} Which results in: {menubar:id=demo5|shadows=-4,-6} {menuitem}{menulink:home}Home Page{menulink}{menuitem} {menu}Pop Up {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} There is also a "smooth" setting, however we've never really noticed any difference between normal shadows and smooth shadows so you can probably set that to _false_ in most cases :-) {quote} h3. Electric Menus {quote} No, this won't electrocute anyone who uses the menu. It's an (oddly named) setting that determines whether pop-up menus are automatically shown or not. For example, move your mouse over the "Hover here" button below: {menubar:id=demo6|electric=true} {menu}Hover here {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} By setting "electric" to _true_, sub menus are automatically displayed when the mouse hovers over them or when they receive keyboard focus. You can disable this effect by setting "electric" to _false_ as shown below: {code} {menubar:id=demo7|electric=false} {menu}Click here {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} {menu} {menubar} |
As you can see, you have to click the button to show the menu.
The menu can be used as a right-click context menu
Code Block |
---|
{code} Which results in:{div:id=redbox|style=background-color:#DD2222;text-align:center;}right-click on me{div} {div:id=bluebox|style=background-color:#2222DD;text-align:center;}right-click on me{div} {menubar:id=demo7demo8|electriccontext=falsetrue} {menu}Click here {menuitem}{menulink:dashboard}Dashboard{menulink}{menuitem} :class=context-for-redbox} {compound-menuitem:home|caption=link one} {compound-menuitem:home|caption=link two} {compound-menuitem:home|caption=link three} {menu} {menubar {menu:class=context-for-bluebox} As you can see, you have to click the button to show the menu. {quote} h2. CSS Customisation See [Customising Menu Styles] h2. Hints and Tips If your menu doesn't seem to be working, the first thing to check is that you have specified an "id" for it. If you have, try changing that "id" to something else - the id has to be unique for the entire web page. If your menu still isn't appearing, then it's possible that none of the items in it are hyperlinked - by default, un-linked items are filtered out of the menu. For example, if you've linked to a page that doesn't yet exist, it's likely that the item will be removed from the menu. h2. Frequently Asked Questions ??I'm using Opera and the menus seem to appear in odd locations...?? Some versions of Opera don't work too well with scrolling menus (scroll=true). Either upgrade to a more recent version of Opera or turn off scrolling {compound-menuitem:home|caption=other link one} {compound-menuitem:home|caption=other link two} {compound-menuitem:home|caption=other link three} {menu} {menubar} |
If your menu doesn't seem to be working, the first thing to check is that you have specified an "id" for it. If you have, try changing that "id" to something else - the id has to be unique for the entire web page.
If your menu still isn't appearing, then it's possible that none of the items in it are hyperlinked - by default, un-linked items are filtered out of the menu. For example, if you've linked to a page that doesn't yet exist, it's likely that the item will be removed from the menu.
I'm using Opera and the menus seem to appear in odd locations...
Some versions of Opera don't work too well with scrolling menus (scroll=true). Either upgrade to a more recent version of Opera or turn off scrolling menus.