Loading...
 


Custom Menus

More screenshots are needed


In Tiki you can use the admin-menus panel, or a wiki page, or a structure to create a custom menu. Menus and many other things can be placed into custom "user" modules using the Smarty {menu ...} syntax. The modules can then be placed 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.

Important: Now with Bootstrap, menus have both more flexibility and sometimes new limitations

As of Tiki 13, a menu can be a "Bootstrap" menu, which uses the Bootstrap CSS framework's navbar and dropdown construction, or a CSS "superfish" menu, or a legacy Tiki menu. The default difference in these is that the Bootstrap menu "parent" item requires a click to open the dropdown of child items, whereas the superfish menu opens when the pointer hovers over the parent. This means the Bootstrap parent item can't be a link for navigation; it's simply a switch to display the child items. On the other hand, the superfish menu's parent items, since they display the child items on hover, can be a navigation link on click.

Also, in vertical Bootstrap menus, child items display straight down, whereas superfish menu "dropdowns" fly out horizontally. Finally, Bootstrap menus are limited to two levels (parent and child), while superfish menus can have up to four levels. The type of menu is specified on the admin-modules page, when the menu-containing module is assigned to a module zone.

 Tip

For an easy, community editable menu use Module menupage, which creates a menu from a designated wiki page.


Creating a Custom Menu


Goto Admin > Menus (or input the URL for your site ending with ./tiki-admin_menus.php.

Image


There are three different types of menus that can be created:
  • Fixed (f): The menu will be static; all the options will be displayed in the menu module.
insert screenshot here
  • Dynamic collapsed (d): The menu is dynamic; only the sections will be displayed in the menu module and there will be +/- links or a folder icon to open/close sections. The application menu in tiki is an example of this class of menu.
insert screenshot here
  • Dynamic expanded (e): The same as before but all the sections are expanded by default and the user can close with (-) or the folder icon of the section that he wants to close.
insert screenshot here


Creating menus from structure tocs

See Structures User

You can either make a navigation menu from a "menu Id" or from a "structure Id".

Configuring a Custom Menu

Once created, click the configuration button on this new menu's row, which will take you to /tiki-admin_menu_options.php?menuId=n

To create a menu item, fill in the edit menu options form: at least Name, URL (relative or absolute), Type = "option" and Position which is a number to set the menu item order. Save and look at the Preview of the menu.
In Tiki >= 2.0, you can specify the link to a wiki page in a menu option with the syntax ((pageName)). The advantage is to have a rename of the option when the page name changes, and to be able to have a SEFURL link if the feature SEFURLs is checked. The SEFURL will become http://example.org/Home instead of http://example.org/tiki-index.php?page=Home .

To create a section (i.e. a folder) that can be opened or collapsed, fill in the edit menu options form with at least Name, URL, Type = "section" and Position.

NOTE: Do not put anything in Sections unless you know the tiki specific feature references e.g. feature_wiki or feature_blog_rankings. These can be auto-filled using Some useful URLs pull-downs, or look at the Tips below to know how to guess the section name of the feature you are interested in.

  • A section is an option that when hovered over (in a Superfish menu) or clicked (in a Bootstrap menu) will display the options below it in the menu hierarchy. The items belonging to a section are defined as a list of consecutive 'options'. The options of a section stop when the next item is a section, a sorted section, or a separator. Again, keep in mind a Bootstrap-type menu can have only two levels, and the top-level section item is used only to trigger the display of its option items; it can't be used as a navigation link itself.
  • A sorted section sorts all its dependent options when displayed.
  • A separator does nothing - except to stop a section (useful if you want to do a section followed by an option)

Example

  • option1
  • section1
    • option2
    • section3
      • option3
      • option4
      • section4
        • option5
    • section5
  • option6
will be
option1option
section1section level 0
option2option
section3section level 1
option3option
option4option
section4section level 2
option5option
section5section level1
separator
separator
option6option


Tip: Leave intentional gaps when inputting the positions of options, such as 10, 30, 50, 70, 90. This will make it easier to add a menu item somewhere in the middle of the menu, in the future.

Allow viewing options/sections only under some conditions

Normally, the visibility of a menu item for a particular user is determined by the visibility of the link target for that user. In other words, if a user doesn't have permission to see "blog 3", then the "blog 3" link won't be visible to that user. This is done automatically by Tiki - no special effort is needed when making the menu. But to explicitly add permissions for menu-item visibility, see the next section.

Allow only to some specific groups

You can restrict the view of some options and sections in the menu, so that only specific groups can view them. For instance, you could add a "User Preferences" option in position 100 to your customized menu that is seen by users only when they log in (registered group).

To do this, you would add:

Name: User Preferences
URL: tiki-user_preferences.php
Sections:
Permissions:
Group: Registered
Type: option Position: 100


You can specify a list of groups (separated by comma in Tiki =< 1.9.x, multiple select since Tiki 2.x). In this case, it means that the user needs to be in each group to see the option.

If you want a list of groups to see the option, = a user to be only in one of the groups to see the option, you have to insert has many options as groups. Each option must have the same parameters (same position, ...) except for the group.

The trick is, if you don't select any Groups, everyone can see the menu option. If you want to exclude a group, select all the other groups (but not the group you want to exclude).

Similarly, you can inadvertently exclude a logged-in group by selecting too many groups. You don't need to select all of your Admin-type groups (they can usually see everything anyway). Just select the one logged-in group that you want to able to see the menu item. (Yes, this is all very weird.)

Allow only if feature X is enabled

Imagine you want to add the option "Users Map" in position 110, to anonymous or registered groups, only when the feature Google Maps (gmap) is enabled in your site. You can do that with:

Name: Users map
URL: tiki-gmap_usermap.php
Sections: feature_gmap
Permissions:
Group:
Type: option Position: 110


Allow only if feature X enabled and if user in a group with given permission

You could also restrict the menu option to be seen when the feature X is enabled, but also only when the user belongs to a group which has a specific permission.

For instance, you could add an option "Upload image" in position 120 which is seen only when the feature image galleries (feature_galleries) is enabled AND only by users in groups which have the permission to upload images (tiki_p_upload_images).

To achieve this behavior, you have to add something like:

Name: Upload image
URL: tiki-upload_image.php
Sections: feature_galleries
Permissions: tiki_p_upload_images
Group:
Type: option Position: 120


Tips

  1. You could add to a menu entry any combination of settings for sections, permissions or groups.
  2. If you need a same option with different perms or group, duplicate the option with the same position value.
  3. To know the section names in order to allow only some new options when the feature is enabled, you can disable/enable them under "Admin home > Features" (tiki-admin.php?page=features), and you will see its name reported on top of the page when it's reloaded after you saved your changes. Then, you can enable/disable them again to its original state, if you don't want to change this setting.
  4. To know the permission names, go to Admin > Groups > press on the key icon (Image ) next to a group) (tiki-assignpermission.php?group=Registered, for instance)

Include menu in a new user module or in templates

Once the menu has all or most of the options go to "Admin Modules" page (/tiki-admin_modules.php), under " Create new user module" at the bottom, find your menu title in the pull-down "Menus" on the right, click use menu and "{menu id=n}" (where n = your menu ID) will appear in the "Create new user module" data box. Add a title (what will users will see) and a name (what admin sees) and click create/edit.

Now you have created a new user module for the custom menu.

Multilingual menu


CSS (Superfish) Menus

This menu (author's documentation at http://users.tpg.com.au/j_birch/plugins/superfish/) can be either vertical (in a module), or horizontal (in a template or in Look & Feel Admin custom code.

To summarize: a menu created in Admin Menus can be displayed in one of three forms: a standard (pre-CSS/pre-Bootstrap) menu, a Superfish menu, and (as of Tiki 13) a Bootstrap menu. Once the menu is created, it can be integrated in Tiki either directly in a module, in a template file {menu id=1} or in Admin Look and Feel (custom code ). To have a Superfish menu used in a module (via admin) or a template (via file editing) add the parameter css=y to the smarty tag {menu}.

Additional Parameters

typehoriz or vert op openopen will close no submenus
sectionLevelnumeric all the submenus beginning at this level will be displayed if the url matches one of the option of this level or above or below
toLevelnumericdo not display option higher than this level
subMenunumeric menu option ID root. Only the submenu of this option will be displayed


Contextual menu example

Imagine this menu (id=101)
  • flower
    • rose
      • monaco
    • daisy
  • tree
    • tree
    • oak
will display when you are on rose, or flower or monaco
flower | tree
rose|daisy
will display when you are tree, oak
flower } tree
tree|oak

Three steps to a contextual menu


From Tiki 7.x and upwards you do not need this anymore, because of the new module administration system you can define the levels directly when you setup or change the module:

''You just need to setup two modules "module_menu":
One setting type=horiz and one setting type=vert and a for both modules type in the same menu Id, but different menu-levels.''

Here the oldschool method before Tiki 7:

  • I presuppose, that you know how to set up a menu.
    for getting this working well, you need:
    section level0 menu items for the top bar and
    option menu items for the left subnavigation menu (user module)

  • First to setup a Contextual Menu, where the Top-Bar (or Top Menu) shows kind of „rubrics“ and the submenuitems are shown in a contextual submenu in the left or right culomn you have to do this:
  • Put the following code into the "Site menu custom code:" box of Admin → Look and Feel → General Layout (2nd Tab) → Top Bar
    use the number of the appropriate Menu → in this example I did choose the Standard „my menu“ for the Top Bar with the Standard ID=43
    leave the "Menu ID" box empty
  • Check on „Top Bar“ and then check on the „Site menu bar“ checkbox
    <div id="topMenu">
    {menu id=43 css=y type=horiz toLevel=0}
    <br clear="both" />
    </div>
  • Second, setup a custom user module in Admin → Modules (.../tiki-admin_modules.php)
  • No menu need to be setup for that
  • second tab „user modules“, scroll down to „Create New User Module“
  • name it for example „mnu_subMenu“ and do NOT apply to inculde any objects.
  • instead put in the following code into the data box:
    <div id="subMenu">
    {menu id=43 css=y type=vert sectionLevel=1}
    <br clear="both" />
    </div>
  • this Module has to be assigned in the first tab „assign/edit modules“.
  • as this kind of contextual menu might be mostlikely used for a Standard „small companies website“ or similar, it should be assigned for „anonymous“ group or anonymous and registered.
  • perhabs a good place would be top left (Position: Left / Order: 1); no parameters needed to work

=> Now you should be done – technically the menu should work

  • Third: Maybe you will have to adjust the style/template css-file, to get the contextual menu into the custom design of your website.

  • in my style, I had to change the following css-items:
    • /***** XHTML Elements (other than body tag) ******/
      • a:link, a:visited {color: ...
    • /***** Site Header & Identity *****/
      • #tiki-top {font-size: ….
    • /****** Menus, Links ******/ … /** CSS (suckerfish) menus **/
      • .cssmenu li, .cssmenu_horiz li, .cssmenu_vert li {border-top: 0px solid #dedede}

  • If and what you will have to change in your css-file, depends on your style/template, on your Tiki-version (2.x, 3.x, 4.x, 5.x etc.) and perhabs on more factors, that did not apply in my case.


Please mind, that this custom-contextual-menu will only show items, when you are "on a page" that is linked from the menu.

If you move forward on a more complex website, then the left submenu will show up "empty". That makes no sense and I am on to get more problems solved related to the contextual menu.

Example:
You link to a "startpage" of a wiki structure, but the other pages of the structure are not linked "in" the menu ...
... clicking on the menu item linking to that page will let appear the appropriate (not empty) contextual menu ...
... but if you "move" forward in the wiki structure, the contextual menu will become empty.



Required CSS Classes

As of Tiki 3.0, Suckerfish menus are supported in CSS by default, and no additional CSS styles need to be added. The following information applies to Tiki 2.

NOTES
For a CSS menu to work in the side column, these changes have to be made to the theme's stylesheet, after the .box selector in the file:

/* Needs to be set for CSS menu in col2 to work */
.box-menu_css_v_43,
.box-menu_css_v_43 .box-data,
.box-menu_css_v_43 ul {overflow: visible !important}

.box-menu_css_v_43 {padding-left: 1em}

The number is the id number of the menu, so this will have to be changed if the menu has a different id number. In the future release, there will probably be a general CSS solution, but in the meantime (May 2008), this previous hack should do the job.

The first part is to enable the menu items to be visible outside of the module; the fourth item is probably necessary to bring the menu (top-level items) fully into view in the module. They are probably too far to the left initially. You might have to adjust the "1em" to another figure (whole numbers or decimal numbers like 1.4em are OK).


url - attributes (target, rel, ...)

If you want to let external links be opened in a new Tab or window, you need a target=_blank.
Please mind a difference in the notation regarded to "normal" HTML (the starting and ending quotes are intended to be missing):
In the menu you have to type:
target=_blank
http://foo.bar" target="_blank
.
And it will only work, if you enable the following in the admin panel "general settings -> navigation":
allow-HTML
Allow HTML in link text and do not escape the url in menu items 
(Please note: this might be insecure if you allow more people to edit menus)
(Please note2: dialogues of the Tiki administration might evole and change over time ... this description shows it's principle.)


Alternatively, you can try How to make menu items open in a new window

other attributes

Other attributes like " rel="box which opens mainly anything in a nice pop up box, if "colorbox" is activated, should work in the same way.

Regression in Tiki 9.0 alpha


 


In Tiki 9 there seems to be a regression that prevents adding other attributes than target.

We will hopefully soon get an extra field for url attributes for the menu items (in the menu administration /tiki-admin_menus.php), but for the time been luciash d'being has figured out a workaround:

(please mind, that you need ftp access to the tiki root folder)


Workaround for adding an url-attribute into a menu item of Tiki9.0 alpha:
(necessary for "rel="box, " target="_blank and maybe more)

1)
login to server/tikiroot (terminal or ftp)
find 'tiki-setup_base.php' in the tiki installation root folder (where is also the setup.sh, the .htaccess and the tiki-install.php)
2)
comment out line 237
237: $vartype['url'] = 'url';
to
237: //$vartype['url'] = 'url';
3)
go to the Tiki website yourdomain/tiki-admin_menus.php
add the menu items included the url attributes like " rel="box; respectively " rel="box
4)
go back to the server and revert the comment to
237: $vartype['url'] = 'url';

Mind, that this line must not stay commented - the comment must be taken away straight after adding the url attributes!
Luci says, that all url fields of this Tiki website would be vulnerable (unprotected) if this line would stay commented out.
this is just a temporary workaround of one of our coders.


Links to be opened inside an iframe in the main display area can be done this way ( Featured Links feature has to be enabled):
Link opens in iframe
tiki-featured_link.php?type=f&url=http%3A%2F%2Fwww.siemens.com%2f
All special characters have to be replaced with the html encoding, e.g. / has to be replaced with %2f!

Perms

  • tikiwiki< 1.10: you need to have tiki_p_admin to create/edit the menus
  • tikiwiki>=1.10: to create a menu or delete one, you need tiki_p_edit_menu, to create/edit a menu option, you need tiki_p_edit_menu_option (of course, you have implicitly the 2 perms when you have tiki_p_admin)

Change the folder icons of a tiki menu

tikiwiki>=1.10
There are 2 ways to change the folder icons
1) to change it as every other icons by overloading it at the templates level. You need to create 2 icons
  • styles/my_style/pics/icons/folder.png
  • styles/my_style/pics/icons/ofolder.png
2)to change locally for a menu. You must specify the path to the icon folder for close section like my_modifications/my_icon.gif and you must supply this icon and the closed icon that must be name my_modifications/omy_icon.gif (notice the o letter)

For the change to take effect, you may have to clear Tiki's caches (at tiki-admin_system.php) and your browser cache, and/or log out of Tiki to clear session information.

Add icons to each option of a menu

tiki>=?
You need to activate the general preference in admin->general->
Then for a specific menu, you must check in when creating/editing this menu the option 'Configure icons for menu entries'
Then for each option, you can give the name of the file containing the icon (the file will be fetched in the directory you specified in admin->general) or you can give the path of an icon relative to tikiroot.

See also

For more information about creating menus only for specific groups see: Tutorial - HowTo Create Menus

References
Suckerfish menus (css menus):


Alias

doc.tiki.org


Bootstrap

AdminGuide

UserGuide

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting (7.x)
Articles and Submissions
Backlinks
Banners
Batch (6.x)
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution (2.x)
Cookie
Copyright
Credit (6.x)
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
Draw 7.x
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management (4.x)
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Lost edit protection
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links (3.x)
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags (2.x)
Task
Tell a Friend, alert + Social Bookmarking
TikiTests (2.x)
Theme CSS & Smarty
Trackers
Transitions (5.x)
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
WebDAV (5.x)
Webmail
Web Services
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval (2.x)
Wiki Plugin extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG (2.x)
XMLRPC


Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki