t3 架构的 megamenu 非常强大,你可以创建很漂亮的下拉菜单 ... 这个视频我们看一下 megamenu 的使用 ...
先打开 菜单 ... Main Menu ... 这是 Joomla 默认的一个菜单 ... 在这里我事先创建了一些菜单项 ... 注意菜单项之间有层级的关系 ... 比如 自行车 这个菜单项里有一些子菜单项 ..
山地 .. 公路 ... 多用途 .. 山地这个菜单项的下面也有一些子菜单项 ... Demo .. Epic 还有 Fate ..
设置菜单项的子项目很简单 ... 打开这个 山地 看一下 ... 你只需要设置一下菜单项的 父目录 ... 这里选择的是 自行车 ... 这样这个 山地 就会作为 自行车的一个子项目 ... (# 关闭)
然后打开 扩展 .. 模板管理 ... t3_blank ... 打开 导航 ...
导航类型 默认是 Joomla Module .. 这里我们选择 Megamenu ... 这样会多出一些设置的选项 ... 我们先保存一下 ...
去前台再看看 ...
Megamenu 会显示在 布局 里的 mainnav 区块上 ...
拥有子项目的菜单项的旁边会有一个向下的三角形 ... 鼠标放在这个菜单项上 ... 会弹出一个下拉菜单 ... 显示这个菜单项的子项目 ..
使用 t3 的 Megamenu,基本上不需要太多配置,我们就可以拥有一个漂亮的下拉菜单了 ...
小配置
再回到导航配置界面 ... 这个下拉触发器就是触发显示下拉菜单的行为 ... Mouse Hover 是鼠标悬停的意思,也就是把鼠标放在菜单项上,就会弹出菜单项的下拉菜单 ...
这里还有一个 Mouse Click .. 鼠标点击 ... 只有点击才会显示下拉菜单 ..
画布外导航,这个选项就是当导航菜单折叠在一起的时候,显示导航菜单的方式 ..
回到前台 ... 调整窗口大小 ... 到一定宽度以后,导航菜单会折叠在一起 ... 左上角会显示一个按钮 ... 点击这个按钮 ... 会从屏幕左边向右弹出导航菜单 ...
这就是画布外导航 ... 如果不使用这种形式显示导航 ... 点击这个按钮,会直接用下拉菜单的形式显示导航菜单 ..
再回来 ...
选择了 Megamenu 类型以后 ...页面的最后 有一个 Megamenu 工具箱 ... 在这里我们可以进一步去设置导航菜单的显示 ...
先点击选中要设置的菜单项 ... 会出现一些设置的选项 ...
额外的 CSS 类就是在这个菜单项上添加自定义的 CSS 类,这样你可以在模板的样式表里单独去为每一个菜单项来设计样式 ....
图标 就是显示在菜单项文字左边的一个小图标 ... 这些小图标都来自 Fortawesome .. 点击这个图标 .. 可以打开 fortawesome 的网站 ...
打开 Icons ... 这里的小图标,你可以用到菜单项上 ... 比如我们想使用这个 icon-blot 图标 ... 打开 这个图标 ..
可以预览一下 ... 复制一下这个小图标的名称 ...
回到 模板的导航设置界面 ... 把复制的图标名字。粘贴到这个 图标 的文本框里 ..
在下面,你可以立即看到应用了这个小图标的效果 ...
保存一下 .. 回到前台 ... 刷新 ...
在 首页 这个菜单项的左边 ... 会显示一个小图标 ...