Fullscreen
[Show/Hide Left Column]
[Show/Hide Right Column]

3d browser Print

Table of contents



Customizing Menus

Some more screenshots are needed


In tikiwiki you can create a custom menu, or a menu from a wiki page, or a menu from a structure. Menus and many other things are placed into modules which can then be stacked in the left or right columns. Menus can be collapsible, you can create a menu where sections of a menu item can be expanded or collapsed within a parent section (folder).

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


Creating a Custom Menu


Goto Admin>Menus (/tiki-admin_menus.php).




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

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 tw>=1.10, you can specify the url of a wiki page in a menu option with the syntax))pageName?((. Tha advantage is to have a rename of the option when the page name changes, and to be able to have a sefurl url if the feature sefurl is checked. The sefurl will be http://mysite.com/Home (external link) instead of http://mysite.com/tiki-index.php?page=Home (external link)

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 can fold the following options. The options dependant on a section are defined as the list of consecutive options with type 'option'. The options of a section stop when the next option is a section, a sorted section, or a separator.
  • A sorted section sorts all its dependant 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
    • option3
  • option4
  • section2
    • option5
will be
option1option
section1section
option2option
option3option
separator
option4option
section2section
option5option


In tikiwiki>1.9.8, more levels have been introduced
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


Trick: It is better to create the options with non-consecutive position values so that later it will be easier to update the menu.

Allow viewing options/sections only under some conditions

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 tw1.9, multiple select in tw1.10). 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 () next to a group) (tiki-assignpermission.php?group=Registered, for instance)
  5. You can use <br /> in a menu option name to have the option displayed on multi lines.
  6. You can use some html in the menu option name to display an image or customize your look

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.

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.

Multilingual menu


CSS (Suckerfish) Menus

In Tiki 2 and newer, it is possible to use a suckerfish menu (external link). This menu can be either vertical (in a module), or horizontal (in a template? or in Site Identity custom code or, as of Tiki 3.0, as the topbar menu by just indicating the menu id number. Even nicer, jquery Superfish effects can be applied to CSS menus in Tiki 3.

To summarize: a menu created in Admin Menus can be displayed in one of three forms: a normal tiki menu (like the default menu in the side column), a PHP Layers menu, and a suckerfish (CSS) menu. In any form 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 in Tiki 2, or topbar menu selection in Tiki 3.0). To have a suckerfish menu used, in a module (via admin) or a template (via file editing) add the parameter css=y to the smarty tag {menu}.


How to Set Up a CSS Menu (in progess)

  1. Ensure that CSS menus are enabled in admin>features.
  2. Create a menu in the normal way at admin > menus.
  3. Note the ID number of the menu you have created.
  4. Edit the module (within tiki) or .tpl file (via ftp) and include (along with whatever html is required) the following syntax: {menu id=1 css=y} .
  5. In Tiki 3.0, the module containing the CSS menu needs this parameter: overflow=y. This allows the submenu items to display outside the module's borders.

Additional Parameters

typehoriz or vert
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


Contextual menu example

Imagine this menu (id=101)
  • flower
    • rose
      • monaco
    • daisy
  • tree
    • tree
    • oak
<div id="topMenu">
{menu id=101 css=y type=horiz toLevel=0}
<br clear="both" />
</div>
<div id="subMenu">
{menu id=101 css=y type=horiz sectionLevel=1}
<br clear="both" />
</div>

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

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).

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!
Links in Menu can be made to open in a new page when adding int he "url:" field "Edit menu options" the following string after the url (no space between url and "):
" target="_blank



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 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.

See also

For more information about creating menus only for specific groups see: Menu HOWTO



References
Suckerfish menus (css menus):


Alias


Contributors to this page: marclaporte4508 points  , chibaguy801 points  , SEWilco674 points  , petej307 points  , mlpvolt1662 points  , rbharris13 pontos  , xavi26262 points  , dthacker1232 points  , Torpedro8 pontos  , sylvie3020 pistettä  , xavidp820 points  , jasondiceman5 points  , mose96 points  and system .
Page last modified on Friday 22 January, 2010 15:05:39 UTC by marclaporte4508 points .

To register

To have an account at this site, please register at Tikiwiki.org (external link), and then use that user name and password to log in here.

Find by Page Name

Exact match

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki documentation and should correspond to development keywords (bug reports and feature requests):

Accessibility (WAI – 508)
Action log 2.x
Alert 3.x
Articles & Submissions
Backlinks
Banners
Blog
Bookmark
Browser Compatibility
Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts Address book
Contact us
Content template
Contribution 2.x
Cookie
Copyright
Custom Home (and Groups Home Page)
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tikiwiki.org (Help System)
DogFood
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
Interaction
Inter-User Messages
InterTiki
Karma
Live Support
Login
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
Profile Manager
Quicktags
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Security
Semantic links 3.x
Shadowbox
Shoutbox
Slideshow
Smarty Template
Smiley
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
System log
Tags 2.x
Task
Tell a Friend + Social Bookmarking 2.x
TikiTests 2.x
Theme
Trackers
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebHelp
Webmail
Webservices
Wiki 3D
Wiki History, page rename, etc
Wiki Page Staging and Approval 2.x
Wiki Plugins extends basic syntax
Wiki Syntax
Wiki structure (book and table of content)
WYSIWYCA
WYSIWYG 2.x
XMLRPC