History: Menu

• «
• »

            ^ [https://gitlab.com/tikiwiki/tiki/-/commit/589d962b0a486b1585ebc4a12255949a5517feba|Superfish/Suckerfish has been removed] before the release of ((Tiki25)), as they are superseded by ((Smartmenus Megamenu)). See explanation under "CSS (Superfish) Menus" paragraph below for the transition. ^


!! Custom Menus
^More ((screenshot))s are needed^
{DIV(class="lead" type="p")}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.{DIV}

Menu types are specified when the menus are assigned on the Admin Modules page. 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)'' (but see "Smartmenus" below), 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.

Since Tiki 20, [https://www.smartmenus.org|__Smartmenus__] functionality has been added to Tiki. Smartmenus enhance Bootstrap menus in these ways, among others:
* Dropdowns open on mouse hover rather than mouse click (in desktop mode). 
* Multiple levels of dropdowns are supported.
* See [https://www.smartmenus.org/about/introduction-to-smartmenus-jquery/|Introduction to Smartmenus jQuery] for the complete list.
To activate Smartmenus, go to the "Interface" tab of the "Features" admin page (tiki-admin.php?page=features#contentadmin_features-interface) . Smartmenus come with several themes or "modes", but for visual consistency with Tiki's themes, "None" should be selected. The feature is then automatically applied to every horizontal Bootstrap menu, such as in navbars. Support for vertical Bootstrap menus is still being worked out, so stay tuned. In the meantime, superfish menus can be used to get the same behavior. When fully integrated, Bootstrap + Smartmenus should make CSS superfish menus redundant.


{REMARKSBOX(type="tip" title="Tip")}For an easy, community editable menu use ((Module menupage)), which creates a menu from the menu construction content of a designated wiki page.{REMARKSBOX}

!! Creating a Custom Menu

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

::{img src=http://tikiwiki.org/img/wiki_up/admin_menu.png}::

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.
You can specify the link to a wiki page in a menu option with the syntax ~np~((pageName))~/np~. 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
||option1|option
section1|section level 0
option2|option
section3|section level 1
option3|option
option4|option
section4|section level 2
option5|option
section5|section level1
|separator
|separator
option6|option||

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 (multiple select). 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
# You could add to a menu entry any combination of settings for sections, permissions or groups.
# If you need a same option with different perms or group, duplicate the option with the same position value.
# 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.
# To know the permission names, go to Admin > Groups > press on the key icon ({img src=img/icons/key.gif }) 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
*((Multilingual Menu))

!! CSS (Superfish) Menus

{REMARKSBOX(type="warning" title="Superfish/Suckerfish menu deprecated from Tiki25")}See explanations below to make the transition between Tiki24 and Tiki25 is you were using it.{REMARKSBOX}

{TABS(name="superfish-menu" tabs="Tiki25+|Tiki24")}
From Tiki25 CSS Superfish/Suckerfish Menus is not available anymore and is replaced by ((Smartmenus Megamenu)). To do the transition between the tow and have similar behavior, like having arrows for sub-menu items you need to check your menu module and be sure that:
* Bootstrap menu is set to "Yes"
* CSS Menu (deprecated) is set to "no" 
Then back on the Settings, General, Navigation (tiki-admin.php?page=general#contentadmin_general-3) enable "Smartmenus".

Due to this and other related changes from Tiki24 to Tiki25 it is possible you have to adjust the design of your menus.
/////
This menu (author's documentation at [https://superfish.joelbirch.design/]) can be either vertical (in a ((module))), or horizontal.

To recap: a menu created in Admin Menus can be displayed in one of four ways: a Tiki legacy (pre-CSS/pre-Bootstrap) menu, a Bootstrap menu, a Superfish menu, or a Bootstrap + Smartmenus menu. Once the menu is created, it can be display at the site 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}.
{TABS}

!!!Additional Parameters
||type|horiz or vert op open|open will close no submenus
sectionLevel|numeric| 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
toLevel|numeric|do not display option higher than this level
subMenu|numeric| 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

{BOX(title="Three steps to a contextual menu" bg="b0b8d0" width="100%")}

^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.^{BOX}

!!url - attributes (target, rel, ...)
!!!External Links in Menus target
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: __{CODE(caption="target=_blank")}http://foo.bar" target="_blank{CODE}__ .
And it will only work, if you enable the following in the admin panel "''general settings -> navigation''":
{CODE(caption="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.){CODE} 

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.

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

!!Perms
* 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
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/img/icons/folder.png
*styles/my_style/img/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
First, you need to activate the general preference in: 
*Settings > Control Panels > Admin > General > Navigation > Menus > 'Menu Icons'
{img src="display1721" link="display1721" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

Then, for the specific menu which you would like to use Icons, you must check the option 'Configure icons for menu entries'.  This can be found at Settings > Menus > Edit ('edit' is found in the 'wrench' icon to the right of the menu you want to use Icons')

Finally, for each option, you can give the name of the file containing the icon (the file will be fetched from the directory you specified at: Settings > Control Panels > Admin > General > Navigation > Menus > 'Default path for the icons') or you can give the path of an icon relative to tikiroot.

!! Drag and drop
Since ((Tiki18)) menu management allows drag and drop of items.


{img src="display1410" link="display1410" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

!!See also
For more information about creating menus only for specific groups see: ((Tutorial - HowTo Create Menus))


-=Alias=-
* (alias(Menus))