-
url - attributes (target, rel, ...)
-
Links in iframe
-
Perms
-
Change the folder icons of a tiki menu
-
Add icons to each option of a menu
-
See also
-
Customizing Menus
-
Creating a Custom Menu
-
Creating menus from structure tocs
-
Configuring a Custom Menu
-
Allow viewing options/sections only under some conditions
-
Include menu in a new user module or in templates
-
Multilingual menu
-
CSS (Suckerfish) Menus
- <h2 class="showhide_heading" id="Custom
izing
_Menus"> Custom
izing
Menus</h2><div class="well">
Some m
ore <a href="screenshot" title="A documentation Status Tag" class="wiki wiki_page">screenshot</a>s are needed</div><br />
+ <h2 class="showhide_heading" id="Custom_Menus"> Custom Menus</h2><div class="well">
M
ore <a href="screenshot" title="A documentation Status Tag" class="wiki wiki_page">screenshot</a>s are needed</div><br />
- In Tiki you can
cr
e
a
te a
custo
m
menu
, or
a
m
e
nu
f
r
om
a wiki page, or a
m
e
nu
fr
om
a structure. Menus and many other things can be placed into custom "user" <a href="modules" title="" class="wiki wiki_page">modules</a> using the Smarty <code>{menu ...}</code> syntax. The modules can then be
st
ac
k
ed in
the
left
and
right column
s
or the syntax can be placed directly in the various custom code text areas of the Look & Feel admin panel
(in <a href="Tiki7" title="Tiki7" class="wiki wiki_page">Tiki7</a> you'll be able to assign modules on top and bottom too)
. Menus can be plain, collapsible, you can create a menu where sections of a menu item can be expanded or collapsed within a parent section (folder) or they can be displayed as dynamic menus with some fancy look and effects using CSS and jQuery.<br />
+ In Tiki you can
us
e
t
h
e a
d
m
in-
menu
s
p
a
n
e
l,
o
r a wiki page, or a
<a hr
ef
="st
r
ucture"
title="" cl
a
ss="wiki
wiki_page">
structure
</a> to create a custom menu
. Menus and many other things can be placed into custom "user" <a href="modules" title="" class="wiki wiki_page">modules</a> using the Smarty <code>{menu ...}</code> syntax. The modules can then be
pl
aced in
a
left
or
right column or the syntax can be placed directly in the various custom code text areas of the Look & Feel admin panel. Menus can be plain, collapsible, you can create a menu where sections of a menu item can be expanded or collapsed within a parent section (folder) or they can be displayed as dynamic menus with some fancy look and effects using CSS and jQuery.<br />
-
In
<a hre
f
="
Tiki
9"
titl
e
="Tiki9"
c
l
as
s=
"
wiki
wi
ki_
pa
g
e
">Ti
k
i9</
a
>
so
m
e enhance
me
nts t
o
the menu a
d
mi
n
h
a
v
e
be
en imp
l
emen
t
e
d,
wh
ic
h in
clud
e some
u
sability im
pr
o
v
ements, sepa
ra
ted section
s
in
t
o
tab
s,
f
i
x
ed
"q
ui
ck
ur
l
s"
b
o
x
, a
dd
e
d
a
u
to
c
o
mp
letes for
pag
es
,
p
r
efs and pe
rms
, and im
pr
o
ve
d
pr
e
view
.<br />
+
As
o
f
Tiki
13, a m
e
nu
ca
n be a "Boot
s
trap
"
menu,
w
h
i
ch uses the Bootstra
p
CSS fr
a
m
e
wor
k
's n
a
vbar
and dropdown con
s
tructi
o
n, or a CSS "sup
e
rfish"
m
en
u. T
h
e def
a
ult differe
nce
i
n
t
hese i
s t
hat
the
Bootstrap
menu
"p
a
rent" ite
m
requ
i
res
a
click to op
e
n
th
e
dropdow
n
of ch
i
ld ite
m
s, whereas the su
pe
rfish
men
u op
e
ns
wh
en t
h
e
po
in
t
e
r
hover
s
o
ver the parent. This
me
ans
the Boot
s
tr
a
p parent item can't
b
e a l
i
nk for navigation; it's simp
l
y a sw
it
ch to displa
y
the ch
i
ld ite
m
s. On the
o
th
e
r hand, the superfish
m
enu's par
ent
item
s, s
inc
e
they dis
p
l
a
y
t
h
e
chil
d
item
s
on hov
e
r,
c
an be a naviga
tion
l
in
k
o
n
click. Al
s
o
,
Bootstrap menu ch
i
ld it
e
ms
d
rop
straight down, whereas s
u
perf
i
sh
men
u
"d
r
opdown
s"
fly
o
ut horizontally. Finally
,
Bootstr
a
p m
e
nus
a
re limited
to
tw
o
le
vels (paren
t
and child), whil
e
s
uperfish menus can have up to
fo
u
r
l
e
vel
s
.
The ty
pe
o
f
menu i
s
specified on the
a
dmi
n
-mo
d
ules
p
ag
e,
when the menu-cont
a
i
n
ing mo
d
ule
i
s assigned to a
mod
ule
zon
e.<br />
- Goto Admin > Menus (or
ty
pe URL
w
i
ll
end with
:
..
./tiki-admin_menus.php
)
.<br />
+ Goto Admin > Menus (or
in
p
ut th
e URL
for your s
i
te
end
ing
with ./tiki-admin_menus.php.<br />
-
Fr
o
m
Tiki
7 o
r
8 (d
e
fi
nit
ely
in
8) th
e
m
o
dule_
menu
is
w
or
king
f
o
r structure
s
.<br />
+
Y
o
u
can
eithe
r
mak
e
a
n
av
i
ga
ti
o
n
m
e
nu
fr
o
m a "
menu
Id"
or fr
om a
"
structure
Id"
.<br />
- You can either make a navigation menu from a "menu Id" od from a "structure Id".
-
- Moreover, it is possible to create dynamic pop-up menus by putting {phplayers id=n} in a TPL file. For older versions of Tiki, you might need to copy the layersmenu CSS entries out of damian.css into the css of your choice (or copy them from a later version).
- On Admin Modules you can assign the module using the "Assign new module" form.
- <h2 class="showhide_heading" id="CSS_Su
ck
erfish_Menus"> CSS (Su
ck
erfish) Menus</h2>
In
Ti
ki
2
a
nd newe
r
, it i
s
p
o
ssibl
e
to
use
a <a class="wiki external" target="_blank" href="http://
www.ali
s
tapa
rt.com
/
a
rt
icl
e
s/
dro
p
down
s" rel="external">suc
k
erfish
menu
</a>
. This menu
can be either vertical (in a <a href="Module" title="Introduction to modules" class="wiki wiki_page">module</a>), or horizontal (in a <a href="template" title="" class="wiki wiki_page">template</a> or in
Site Identity cust
o
m c
o
de or, as of Ti
k
i
3.0,
as th
e
topbar m
e
nu
by just in
d
icating the
m
enu
i
d
n
umber.
Even ni
c
er, jq
u
ery Superfi
s
h effec
t
s
c
an be applie
d
to CSS m
e
nus in Tiki 3
.<br />
+ <h2 class="showhide_heading" id="CSS_Su
p
erfish_Menus"> CSS (Su
p
erfish) Menus</h2>T
h
i
s
menu
(
a
utho
r
'
s
d
o
cum
e
nta
t
i
o
n
a
t
<a class="wiki external" target="_blank" href="http://
u
s
e
r
s.
t
pg
.com
.
a
u/j_b
i
r
c
h/p
l
ugin
s/
su
p
erfi
s
h/
" rel="external">
http://u
s
ers.tpg.com.a
u
/j_bir
c
h/plugins/sup
erfish
/
</a>
)
can be either vertical (in a <a href="Module" title="Introduction to modules" class="wiki wiki_page">module</a>), or horizontal (in a <a href="template" title="" class="wiki wiki_page">template</a> or in
L
ook
&
F
ee
l
A
dmin cust
om
c
o
de.<br />
- To summarize: a menu created in Admin Menus can be displayed in one of three forms: a n
ormal tiki menu
(
lik
e
t
he def
a
ult
menu
in the
s
ide col
u
mn), a PHP Lay
ers menu, and a
sucker
fi
sh
(CSS
) menu. In any form it can be integrated in
t
iki either directly in a module, in a template file {menu id=1} or in Admin Look and Feel (custom code
in Tiki 2, or topbar menu selection in Tiki 3.0
). To have a su
ck
erfish menu used
,
in a module (via admin) or a template (via file editing) add the parameter css=y to the smarty tag {menu}.<br />
+ To summarize: a menu created in Admin Menus can be displayed in one of three forms: a
sta
n
dard
(
pr
e
-CSS/pre-Boo
t
str
a
p)
menu
,
a
su
p
er
fi
s
h
menu, and
(
a
s
o
f
Tik
i
13
)
a Bootstrap
menu. In any form it can be integrated in
T
iki either directly in a module, in a template file {menu id=1} or in Admin Look and Feel (custom code ). To have a su
p
erfish menu used in a module (via admin) or a template (via file editing) add the parameter css=y to the smarty tag {menu}.<br />
- <h3 class="showhide_heading" id="How_to_Set_Up_a_CSS_Menu_in_progess_">How to Set Up a CSS Menu (in progess)</h3>
+ <h3 class="showhide_heading" id="How_to_Set_Up_a_CSS_Menu_in_prog
r
ess_">How to Set Up a CSS Menu (in prog
r
ess)</h3>
- <br /> <pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
7
" ><div id="topMenu">
+ <br /> <pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
1
" ><div id="topMenu">
- <br /> <pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
8
" ><div id="subMenu">
+ <br /> <pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
2
" ><div id="subMenu">
- <pre class="codelisting" data-wrap="n" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
9
" >/* Needs to be set for CSS menu in col2 to work */
+ <pre class="codelisting" data-wrap="n" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
3
" >/* Needs to be set for CSS menu in col2 to work */
- In the menu you have to type: <strong><div class="codecaption">target=_blank</div><pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
10
" >http://foo.bar" target="_blank</pre></strong> .<br />
+ In the menu you have to type: <strong><div class="codecaption">target=_blank</div><pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
4
" >http://foo.bar" target="_blank</pre></strong> .<br />
- <div class="codecaption">allow-HTML</div><pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
11
" >Allow HTML in link text and do not escape the url in menu items
+ <div class="codecaption">allow-HTML</div><pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
5
" >Allow HTML in link text and do not escape the url in menu items
- Links to be opened inside an iframe in the main display area can be done this way ( <a href="Featured+Links" title="Featured Links" class="wiki wiki_page">Featured Links</a> feature has to be enabled): <div class="codecaption">Link opens in iframe</div><pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
12
" >tiki-featured_link.php?type=f&url=http%3A%2F%2Fwww.siemens.com%2f</pre> All special characters have to be replaced with the html encoding, e.g. <span style="color:blue; background-color:"><strong>/</strong></span> has to be replaced with <span style="color:blue; background-color:"><strong>%2f</strong></span>!<br />
+ Links to be opened inside an iframe in the main display area can be done this way ( <a href="Featured+Links" title="Featured Links" class="wiki wiki_page">Featured Links</a> feature has to be enabled): <div class="codecaption">Link opens in iframe</div><pre class="codelisting" data-wrap="1" dir="ltr" style="white-space:pre-wrap; white-space:-moz-pre-wrap !important; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;" id="codebox
6
" >tiki-featured_link.php?type=f&url=http%3A%2F%2Fwww.siemens.com%2f</pre> All special characters have to be replaced with the html encoding, e.g. <span style="color:blue; background-color:"><strong>/</strong></span> has to be replaced with <span style="color:blue; background-color:"><strong>%2f</strong></span>!<br />