V. 导航设置

Off-Canvas 导航

在便携设备上(如平板、手机)屏幕是比较小的,而你唯一能做的就是把网页内容堆叠起来,除非你决定使用浏览器之外的可视画面。Off canvas 布局就是这样做的。这种布局充分利用屏幕空间来保证内容或导航隐藏,除非直到一个大尺寸屏幕允许它可见或某些人采取行动来展示它。

启用 Off-Canvas 导航

要启用该选项,从你的网站后台导航至: Extensions (扩展)>> Template Manager(模板管理) >> JA Template(JA 模板) >> 打开 Navigation(导航) 标签

前台界面

固定导航

固定导航, 也被称为固定导航,基本上是固定在顶部或底部位置的网站菜单,以便当用户向下滚动页面时不会消失。 换而言之,在网站的任何位置无需上下滚动便可访问网站的导航。

添加固定导航到用T3框架开发的模板中(如JA Brisk, JA Mero)

 1: 升级 T3 框架插件到版本: 1.2.1

 2: 在桌面和手机布局中添加CSS类到固定导航条

要使用固定导航, 添加CSS类 navbar-collapse-fixed-top (为折叠菜单) 和 navbar-fixed-top (在桌面布局) 到 #ja-mainnav 的div (位于: templates\ja_mero\tpls\blocks 中的 mainnav.php 文件 )中,你可能需要更新主导航的左&右外边距的div显示

  1. <navid="ja-mainnav"class="wrap t3-mainnav navbar-fixed-top navbar-collapse-fixed-top">

Megamenu 配置

T3 框架支持 MegaMenu,在 Joomla 中没有的特征. 用 Megamenu,你可以使你的网站菜单系统拥有更灵活的显示方式。用这种新的配置方法,会使你配置超级菜单更容易。

请注意超级菜单设置不是全局设置. 如果你使用多种样式,你需要启用并配置超级菜单选项中你想要使用的样式

常规配置

从 T3 空白模板设置面板中,选择Navigation标签

  • 下拉触发: 选择打开子菜单的方式 (鼠标悬浮或鼠标点击)
  • Off-Canvas 导航: 此选项用于像ipad或手机这类小屏幕的折叠菜单。此设置已在上面有介绍过 (Off-Canvas 导航)
  • 总是显示子菜单: 在小屏幕中的折叠菜单, 当你点击导航按钮时可以选择显示所有子菜单或仅主菜单。
  • 导航类型: 此选项允许你为当前样式使用超级菜单或Joomla系统本身菜单
  • Megamenu 配置: 选择已经启用超级菜单的菜单

MegaMenu 配置

这里有你应该知道的3个级别的配置

  • 子超级菜单设置
  • 菜单栏设置
  • 菜单项设置

1. 子超级菜单设置

此设置允许你配置子超级菜单的宽度,添加栏,并添加该样式的CSS类

2. 菜单栏设置

在这一级配置中,你可以:添加栏,删除栏,设置栏宽度,分配模块到栏。

3. 菜单项

在这一级设置中, 你可以:启用或禁用一个菜单项的子菜单,是否成组显示子菜单,向左向右移动菜单项,分配一个模块到模块菜单项,为菜单项添加图标

如何使用超级菜单设置选项

添加新栏,行并分配模块到栏,行

  •  1: 点击一个栏然后选择添加 栏/行

  •  2: 在每栏中,添加新的栏

  •  3: 现在分配模块到 栏/行

添加一个子菜单到菜单项

点击你想添加到子菜单的菜单(你可以只为没有子菜单的菜单添加子菜单)

添加2个模块到1栏菜单

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

 2: 为子菜单添加一行

 3: 构成子菜单组

 4: 分配模块到子菜单

定制MegaMenu样式

你可以通过添加Class(CSS类)来定制MegaMenu项的样式

你可以为超级菜单的一栏或一个菜单项添加CSS类。 所以你应该考虑优先排序,优先排序 (Mega menu --> Column --> Menu Item) 是从低到高。

这里有2个文件可为MegaMenu添加样式。

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

为菜单项添加图标

你可以添加CSS类来定义你想添加到菜单项的图标,或者你可以使用Bootstrap 2的基本CSS类: http://getbootstrap.com/2.3.2/base-css.html#icons

让我们看看前台

注意:创建一个MengaMenu 启用的菜单然后 添加/放置 菜单项到该菜单。

动画效果设置

T3 Megamenu 支持点击的动画效果,请记住该特性仅开始于版本: 1.2.5

这里有 2 个地方配置动画效果:动画类型动画时长.

当前, T3 支持 4 种动画类型: 渐变, 滑动, 缩小, 和 放大.

添加新评论