`
haohappy2
  • 浏览: 326298 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

How show menu and submenu for joomla

PHP 
阅读更多

At this point, we've got the Menu and Menu Items done. Now we need to create the Menu Modules. In Joomla!, the Menu Module determines three main things: (1) what the menu looks like; (2) where on the page it will show; and (3) on which pages it will show. We will do two examples. In the first example, we will create one Menu Module that shows all of the items in one menu. In the second, we will create three separate menu modules to show the Pets, Dogs, and Cats menus as separate modules.

One Menu Module

To show this as one module, follow these steps:

  1. Navigate to Extensions → Module Manager, click the "New" icon in the toolbar, and select "Menu".
  2. Enter the Title as "Pets Menu" and Position as "left".
  3. In the Menu Assignment, enter "Select Menu Item(s) from the List" and select "Home" (under "mainmenu"), and all of the Menu Items under the "pets-menu".
  4. In Menu Name, select "pets-menu" from the drop-down list box.
  5. If you are using the default "rhuk_milkyway" template and want the menu to look like the other menus, in the Advanced Parameters enter "_menu" for Module Class Suffix.

Now, navigate to the front-end home page. You should see the Pets Menu as shown below:

Click on the Dogs Menu Item. The selected article displays and the Dogs menu expands to show the two submenu items, Collies and Greyhounds. Note that we can set a parameter in the Module Manager to always show submenu items. Here we have taken the default value of "No". Click on "Collies" and again the article changes. (Or it would if we had different articles for each Menu Item!)

Notice that the Breadcrumbs now shows three levels: Home, Dogs, Collies. Because we used submenus, Joomla! "knows" that Collies is under Dogs.

Separate Menu Modules

Now we will change our example to create three separate menus -- one for the top level (Dogs and Cats), one for the Dogs (Collies and Greyhounds), and one for the Cats (Tabbies and Siamese).

Note: Make sure that your Menu Items each have a unique Alias value. If you use the Copy command in the toolbar of the Menu Item Manager to create these Menu Items, the Alias will be the same as the item being copied. In this case, just edit the Alias value to make it unique (for example, the same as the Title). If you have duplicate Alias values, the menus will not work correctly if the parameter SEF URLs is set to Yes in Global Configuration.

To do this:

  1. Open the Pets Menu in the Module Manager and change the Title to "Pets Menu Top Level Only".
  2. Select the Left Position.
  3. Under Module Parameters, select the Menu Name "Pets Menu"
  4. Under Module Parameters, change the Menu Style to "List".
  5. Set the Start Level to "0" and the End Level to "1".
  6. This is optional. It allows your template to apply special a menu style to the menu (a border, for example). In Advanced Module Parameters put "_menu" in Module Class Suffix.
  7. For submenu Dog, in extensions menu select Module Manager, click New and select Menu, and set the title to "Dogs Submenu".
  8. Set the Position to "Left".
  9. Now this part is very important. We only want this submenu to show when we are in one of the Dogs Menu Items. So, in the Menu Assignment box, select the three items "Dogs", "Collies", and "Greyhounds",
  10. Under Module Parameters, select the menu name "Pets Menu" and change the Menu Style to "List".
  11. Set the Start Level to "1" and End Level "2".
  12. This is optional. In Advanced Module Parameters, set Module Class Suffix to "_menu".
  13. For the "Cats Submenu", repeat steps from 7 to 12 except step 9. In the Menu Assignment box, select the items "Cat", "Tabbies" and "Siamese" (so this menu will only show under these Menu Items).

At this point, we have three menu modules all pointing to the Pets Menu. The only differences between them are (1) the Start and End Levels and (2) the Menu Item Assignment.

Now, in the front end, navigate to the Home page. The "Pets Menu Top Level Only" menu should show. Select the "Dogs" Menu Item. Now, the "Dogs Submenu" should show as a separate menu.

 

Click on the Collies Menu Item and notice that again the Breadcrumbs shows the hierarchy of "Home", "Dogs", and "Collies".

Using this same technique, it is easy to create third-level submenus. You just make the Parent Menu Item a second-level submenu. Then you could use the same technique to create a separate Menu Module with Start Level of 2 and End Level of 3. This would show only the third-level Menu Items.

 

Please via http://www.joomlashack.com/tutorials/278-creating-a-parent-child-relationship-in-a-menu to get more infomation

 

For joomla template, please via http://www.bestofjoomla.com/index2.php?option=com_bestoftemplate&task=download&no_html=1&id=1896

 

Joomla-Menus and how to make them look cool, also can get more inforamtion from http://www.docin.com/p-35596593.html

分享到:
评论

相关推荐

    android 选项菜单(此处为icon menu)--Menu,SubMenu,MenuItem的用法

    在本篇内容中,我们将深入探讨如何使用`Menu`, `SubMenu`, 和 `MenuItem`来创建和管理Android的图标选项菜单。 ### 1. Menu类 `Menu`是Android系统提供的接口,它表示一个抽象的菜单对象,可以包含多个菜单项。...

    asp.net下的vue与iview的多页界面,包含tab,menu,submenu控件

    asp.net下的vue与iview的多页界面,包含了栅栏界面只是,tab,Menu,submenu等高级控件

    Submenu动态变化的小例子

    在Android中,菜单通常在`onCreateOptionsMenu`方法中创建,包括主菜单(Menu)和子菜单(Submenu)。在XML布局文件中定义菜单结构,例如`menu_main.xml`,然后在对应的Activity或Fragment中加载这个布局。 ```xml ...

    crud-Menu-subMenu:个人项目,简单的Crud Menu子菜单

    这是可以使用Menu dan Submenu进行简单操作的Web服务。 两者之间的关系是一个菜单包含多个子菜单,但是一个子菜单仅存在于一个菜单上。该项目使用express.js和sequelize(postgreql)URL端点获取所有菜单...

    ActionBar在Android2.x的实现,类似新版微信界面

    ActionBar在Android2.x的实现,类似新版微信界面

    SubMenu的使用

    在`menu.xml`中,可以通过`<menu>`标签来定义顶级菜单,而`<group>`、`<item>`和`<submenu>`则分别用于定义分组、菜单项和子菜单。 创建SubMenu的基本步骤如下: 1. 在`menu.xml`文件中,使用`<submenu>`标签开始...

    subMenu导航菜单实例(JQuery插件)

    【标题】:subMenu导航菜单实例(JQuery插件) 【描述】:subMenu导航菜单是一种常见的网页交互元素,尤其适用于构建多级导航系统。它利用JQuery这一强大的JavaScript库来实现动态效果,如滑动、淡入淡出等,为用户...

    Android---UI篇---Menu(菜单)

    本文将详细探讨Android系统中的三种菜单类型:Options Menu、Context Menu和SubMenu。 首先,我们来了解一下Options Menu,也称为主菜单。Options Menu是Android应用程序中最常见的菜单类型,通常在屏幕的顶部或...

    bootstrap-submenu

    Bootstrap Submenu是一款基于Bootstrap框架的插件,专为创建功能丰富的多级下拉菜单而设计。Bootstrap是一款广泛使用的前端开发框架,它提供了大量的预设样式、组件和JavaScript插件,帮助开发者快速构建响应式和...

    Devexpress agmenu &agDataGrid8.2.8 for silverlight3.0

    AgMenu allows you to specify menu-level and submenu-level settings so you can enable common templates for items, sub-menu items and separators. Reading Menu Structure from XML Files - menu hierarchy...

    菜单,包括选项菜单,子菜单,上下文菜单

    首先,选项菜单(Option Menu)是最常见的菜单类型,通常位于屏幕的顶部或底部,作为应用的主要功能入口。用户可以通过点击屏幕右上角的三道横线(汉堡菜单)来打开它。创建选项菜单主要涉及在`res/menu`目录下定义...

    【ASP.NET编程知识】Element NavMenu导航菜单的使用方法.docx

    3._submenu 使用:Element NavMenu 支持submenu 的使用,submenu 可以嵌套使用,实现了菜单的层次结构。 4. 事件处理:Element NavMenu 提供了事件处理机制,可以在菜单项被选择时执行相应的事件处理函数。 5. 数据...

    android各组件详解- Menu

    根据应用场景的不同,Android系统提供了三种类型的菜单:OptionsMenu、ContextMenu以及SubMenu。 1. **OptionsMenu**:这是一种全局菜单,通常通过设备上的物理Menu键或屏幕上的虚拟按钮来触发,适用于当前Activity...

    jQuery子菜单插件Slight Submenu

    **jQuery子菜单插件Slight Submenu详解** jQuery子菜单插件Slight Submenu是一款针对网页导航菜单设计的工具,其主要目标是帮助开发者轻松创建和管理网站的下拉子菜单。这款插件以其高度可配置性和可扩展性著称,...

    Android MenuDemo Menu全面讲解

    另外,还可以通过`MenuInflater`和`SubMenu`来构建嵌套结构的Menu。 五、动态添加Menu项 在某些情况下,可能需要在运行时根据应用程序的状态动态地添加或移除Menu项。这可以通过在`onPrepareOptionsMenu(Menu menu)...

    Laravel开发-laravel-menu

    $menu->add('产品', function ($subMenu) { $subMenu->add('产品A', ['route' => 'product.a']); $subMenu->add('产品B', ['route' => 'product.b']); }); ``` 5. **条件渲染** 可以根据用户角色或其他条件来...

    android Menu

    SubMenu uploadMenu = (SubMenu) menu.addSubMenu(0,MENU_DOWNLOAD,1,"下载设置"); uploadMenu.setHeaderIcon(R.drawable.icon); uploadMenu.setHeaderTitle("下载参数设置"); uploadMenu.add(0,SUB_MENU_UPLOAD...

    VB编程资源大全(英文源码 表单)

    This sample uses an image of Homer Simpson<END><br>39 , DynaMenu.zip Program shows how to dynamically create submenu items for both the menu and the popup at run time, and at the same time ...

Global site tag (gtag.js) - Google Analytics