T3框架设置(四)导航设置和菜单分配

五、T3框架的导航设置

闭幕式导航

便携设备上的屏幕都是很小的,唯一的办法是将适应网页的内容是堆栈起来,除非你决定使用浏览器的可见的画面之外的空间。 闭幕式导航能够做到这一点。这个布局充分利用空间,离开屏幕保持内容或隐藏导航来获得一个较大的屏幕尺寸,直到用户采取行动,来浏览它。

 

 

开启“闭幕式导航”

开启这个选项,在您的网站后台,定位到:Extensions(扩展) >> Template Manager(模板管理) >> JA Template(JA 模板) >> open Navigation tab(开启导航选项卡)

前端外观


置顶导航

置顶导航,也被称为固定的网站导航,它是一个被锁定的位置,当用户向下滚动页面时不会消失,换句话说,它可以从网站的任何地方访问,而无需滚动。

增加置顶导航(T3框架开发的模板JA Brisk, JA Mero)

  • 第一步:升级T3框架插件到1.2.1以上
  • 第二步:在桌面和移动设备布局上添加置顶导航类

成为置顶导航,添加类(class)navbar-collapse-fixed-top(折叠菜单),navbar-fixed-top(桌面菜单)在#ja-mainnav div(该文件是:mainnav.php,位于:templates\ja_mero\tpls\blocks)。您需要更新 mainnav div 的 margin-left 和 margin-right

<nav id=”ja-mainnav” class=”wrap t3-mainnav navbar-fixed-top navbar-collapse-fixed-top”>

 

Megamenu 配置

 

T3框架支持MegaMenu,是Joomla所没有的功能。通过Megamenu,您可以更加灵活地显示您的网站菜单系统。使用新的方式的配置,它更容易为您配置大型菜单。

请注意, MegaMenu 设置不是全局设置。如果您使用多个样式,您需要在您想要使用的风格,启用和配置 MegaMenu 选项。

常规配置

 

从T3空白模板设置面板中,选择“ 导航 “选项卡

  • 下拉触发器:选择打开子菜单的方式(鼠标悬停或点击鼠标)
  • 闭幕式导航:在iPad或手机等小屏幕设备应用此选项折叠菜单。显示此设置在上述部分( 闭幕式导航 )
  • 总是显示子菜单:在小屏幕的折叠菜单中,你可以选择当点击导航按钮时,显示所有子菜单或只是主菜单。
  • 导航类型:这个选项允许您使用当前样式的Megamenu或Joomla菜单系统。
  • Megamenu配置:选择菜单megamenu时启用。

Megamenu配置

您应该知道有三种配置

  • sub-Mega Menu 设置
  • 栏目设置
  • 菜单项设置

1. Sub-megamenu setting

这个设置允许您配置sub-megamenu的宽度,增加列,并为其添加类风格。

2.栏目设置

在这个配置,您可以:增加栏目,删除栏目,设置栏目的宽度和给栏目分配模块。

3.菜单项设置

 

在这个配置,您可以:启用或禁用一个菜单项的子菜单,在组合中显示或不显示子菜单,移动向左或向右菜单项,给菜单项分配一个模块,为菜单项添加图标。

如何使用Megamenu设置选项?

添加新的列、行,并为其分配模块。

步骤1:点击列,然后选择添加列/行。
步骤2:在每一列中,添加新列。
步骤3:现在给列/行分配模块。

给菜单项添加一个子菜单

点击你想添加子菜单的菜单项(你只能给没有子菜单的菜单项添加子菜单)。

添加2:在一列中添加模块

步骤1:选择一个没有子菜单的菜单项,然后添加子菜单

步骤2:为sub-megamenu添加行

步骤3:分组菜单

步骤4:为子菜单分配模块

MegaMenu的风格样式

您可以通过添加“额外的CSS类”来改变MegaMenu的风格样式

 

您可以为MegaMenu添加一个外的CSS类,一列或一个菜单项。所以您应该了解限顺序。优先顺序(Mega menu –> Column菜单栏 –> Menu Item菜单项)由低到高。

以下两个文件,都可以为 MegaMenu 添加风格样式.

  • megamenu.less in: plugins/system/t3/base/less
  • megamenu.less in: templates/t3_blank/less

为菜单项添加图标

您可以在需要添加图标的菜单项。添加CSS类来定义图标,或者你可以使用 Bootstrap 的CSS类:http://twitter.github.com/bootstrap/base-css.html#icons

让我们到前台看看

注意:创建一个菜单,然后在MengaMenu启用/删除菜单项。

 

六、菜单分配

将当前应用的风格分配到相应菜单。请记住,菜单分配将覆盖相同菜单的默认风格。

发表评论