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显示

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

让我们看看前台


动画效果设置
T3 Megamenu 支持点击的动画效果,请记住该特性仅开始于版本: 1.2.5
这里有 2 个地方配置动画效果:动画类型 和 动画时长.

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

添加新评论