[All Adaptavist Apps]
Page History
| Excerpt |
|---|
The |
...
top-level |
...
menu |
...
bar |
...
is |
...
always |
...
shown |
...
and |
...
it's |
...
design |
...
should |
...
fit |
...
with |
...
the |
...
overall |
...
look |
...
and |
...
feel |
...
of |
...
your |
...
theme |
...
layout... |
...
The
...
top-level
...
menu
...
bar
...
is
...
referenced
...
by
...
the
...
CSS
...
class:
...
div.dynarch-horiz-menu
Background and borders
To apply a background colour, use the following syntax:
| No Format |
|---|
}} h2. Background and borders To apply a background colour, use the following syntax: {noformat} div.dynarch-horiz-menu { background-color: #ffffd6; } {noformat} |
If
...
you're
...
using
...
a
...
pre-built
...
menu
...
style
...
that
...
has
...
a
...
graphical
...
background,
...
you'll
...
need
...
to
...
remove
...
the
...
background
...
image
...
in
...
order
...
for
...
your
...
background
...
colour
...
to
...
be
...
seen:
| No Format |
|---|
} div.dynarch-horiz-menu { background-color: #ffffd6; background-image: none; } {noformat} |
For
...
more
...
information
...
on
...
styling
...
backgrounds
...
with
...
CSS,
...
including
...
using
...
background
...
images,
...
please
...
see
...
...
To set the border on the menu bar, use the following notation:
| No Format |
|---|
|http://w3schools.com/css/css_background.asp]. To set the border on the menu bar, use the following notation: {noformat} div.dynarch-horiz-menu { border: 1px dotted #000; border-style: dotted none; } {noformat} |
The
...
example
...
above
...
would
...
display
...
a
...
1
...
pixel
...
dotted
...
black
...
border
...
on
...
the
...
top
...
and
...
bottom
...
of
...
the
...
menu
...
bar.
...
For
...
more
...
information
...
on
...
styling
...
backgrounds
...
with
...
CSS,
...
including
...
using
...
background
...
images,
...
please
...
see
...
...
Menu item states
to follow
Menu item text
to follow
Explicit action items
An "explicit action" item is one which when clicked will actually do something, such as going to a specific URL, rather than just showing a pop-up menu.
For example, the "Home" menu on our website is an explicit item - if you click it, it will go to the home page for the current space.
Normally, these items look the same as all the other items on the menu bar. At Adaptavist, we commonly change the cursor for such items to provide some feedback to the end user that the item itself will trigger an action:
| No Format |
|---|
|http://w3schools.com/css/css_border.asp]. h2. Menu item states +to follow+ h2. Menu item text +to follow+ h2. Explicit action items An "explicit action" item is one which when clicked will actually do something, such as going to a specific URL, rather than just showing a pop-up menu. For example, the ["Home" menu on our website|2 - Menu Customisation] is an explicit item - if you click it, it will go to the home page for the current space. Normally, these items look the same as all the other items on the menu bar. At Adaptavist, we commonly change the cursor for such items to provide some feedback to the end user that the item itself will trigger an action: {noformat} /* Add pointer cursor to menus which have explicit actions */ div.dynarch-horiz-menu table tr td.explicit-action { cursor:pointer; } {noformat} |
If
...
desired,
...
you
...
could
...
change
...
the
...
background,
...
borders
...
or
...
any
...
other
...
aspect
...
of
...
such
...
items.
...
Items
...
with
...
sub-menus
...
to follow
Menu Separators
Separators are displayed using a HTML <div> element. An example of the custom separators we've used on our site is shown below:
| No Format |
|---|
follow+ h2. Menu Separators Separators are displayed using a HTML {{<div>}} element. An example of the custom separators we've used on our site is shown below: {noformat} /* Separators on the menu bar */ div.dynarch-horiz-menu table tr td.separator div { border-left: 1px solid #ACA899; border-right: 1px solid #FFFFFF; border-style: none solid; height: 100%; margin: 2px 3px; opacity: 0.7; width: 0px; } {noformat} |
In
...
the
...
example
...
above,
...
we've
...
set
...
the
...
left
...
and
...
right
...
border
...
styles
...
and
...
then
...
used
...
a
...
width
...
of
...
0
...
pixels
...
to
...
remove
...
the
...
space
...
between
...
the
...
borders.
...
This
...
gives
...
a
...
subtle
...
3D
...
effect
...
to
...
the
...
separator.
...
Panel
...
specific
...
styles
...
You
...
can
...
apply
...
your
...
styles
...
to
...
menu
...
bars
...
in
...
a
...
specific
...
theme
...
panel
...
by
...
prefixing
...
them
...
with
...
the
...
...
...
.
For example,
...
to
...
apply
...
a
...
background
...
colour
...
to
...
any
...
menu
...
bar
...
used
...
in
...
the
...
main
...
content
...
area,
...
prefix
...
with
...
.atb-content
...
:
| No Format |
|---|
} .atb-content div.dynarch-horiz-menu { background-color: #ffffd6; background-image: none; } {noformat} {align:right}\\ Next page: [2 - Changing |
| Align | ||
|---|---|---|
| ||
Next page: 2 - Changing Pop-up Menus]{align} |
Overview
Community Forums
Content Tools
Apps