编辑“Joomla/用JA Transmenu模块做多级弹出菜单”

{{Joomla top}}
在[[Joomla]]世界，建造一个滑动菜单可以有N多选择。JA Transmenu 模块是其中一个，下图中所演示的菜单就是用这个模块做成的。之所以首先来演示这个模块，是因为以下两点原因：

1、它是免费的。

2、简单易用。

[[Image:Joomla ja 1.jpg]]

==创建一个点不动的菜单链接==
在上面演示中，一级菜单中的“酷站巡展”这个链接是点不动的。这个效果适合于强制访客点击二级菜单的需要。有人认为，在新建菜单项时，选择“占位符/分隔符”（Separator / Placeholder）就能造成一个点不动的链接，因为它不指向任何目标。不过，这种办法所生成的菜单链接其样式很糟糕，无法与其他同级链接保持一致，因为它的[[CSS]]类不是mainlevel。

==建立多级菜单==
Joomla自身允许创建多级菜单，问题是它无法展示出滑动效果。因此，我们先解决第一步：创建多级菜单。

使用（超级）管理员身份登录到Joomla网站后台，点击菜单上的“Menu”，然后选择一个你想实现多级滑动的菜单，比如说topmenu，点击其名称。这时会展示出所有已属于topmenu的菜单链接，我猜想你那里很可能还是单级的。

点击右上角工具栏上的“New”按钮，新建一个菜单项目。根据你的目标选择菜单类型，例如要指向FireBoard论坛，就选择“component”类型。然后点击“Next”按钮。实现多级的关键就在下面这个页面上—— 仔细看看，“Parent Item”这个设置，中文版本应该是“上级项目”，默认是选择了“Top”，即“顶级”（如下图所示），所以你新建的菜单链接都属于第一级。假如现在我们要将Fireboard论坛的菜单放到第二级，那么就必须在此为它选择上级菜单项目。选中之后，点击工具栏上的“Save”按钮保存新菜单项。

[[Image:Joomla ja 2.jpg]]

保存之后，又回到了刚才的topmenu内容列表。这时可以看到，新建立的菜单位于某个一级菜单之下，并且在版面上向右增加了缩进，很容易就能看出来父级菜单和子级菜单的关系。

如果要将现有的某个一级菜单变为二级菜单，只需要在topmenu内容列表上点击其名称，进入其设置页面，然后将“Parent Item”这里选择为Top之外的其他一级菜单项即可。

==完成多级滑动菜单==
从Joomla后台安装JA Transmenu。这个模块本身没有任何内容，它的任务是在前台展示管理员指定的某个菜单，如上面提到的topmenu。

既然我们要通过JA Transmenu来展示topmenu的内容，那么原来的topmenu就必须取消发布。否则前台就会出现两个重复的topmenu内容。

将原来的topmenu取消发布之后，我们点击后台模块列表中的JA Transmenu名称进入其设置页面。可以看出，设置参数并不多。

[[Image:Joomla ja 3.jpg]]

前两个参数都是关于CSS的，为了便于用户自定义菜单的样式。我们先从浅处入手，不必理会这里。

“菜单名称”这里需要管理员指定用JA Transmenu来展示哪个菜单模块，因为它无法包揽所有菜单。我们本例中就指定使用topmenu吧，因为刚才我们为topmenu建立了多级菜单链接。

“菜单类型”是要管理员决定，前台的滑动菜单其一级菜单是水平放置，还是垂直放置？比如本例中的topmenu，我们一般都是习惯于水平放置，因此在这里选择“水平”即可。

“菜单方向”则是指二级菜单的弹出方向，不要管三级、四级，因为那些默认都是水平的。二级菜单需要指定方向，是因为一级菜单的方向有两种可能。既然我们将一级菜单设计成了“水平”，那么二级菜单应该是在垂直方向上。这里有两种选项：向上或者向下。很显然，一般来说，我们希望二级菜单向下弹出，就如同本文第一页展示的那个菜单。不过，也难免某些用户希望出现[[Windows]]的开始菜单那样的效果，那么你选择“向上”即可。

“菜单相对位置”是指二级以下的菜单弹出方向。因为前面的参数已经把一级、二级菜单方向都定义了。所以，我们希望三级菜单从哪里弹出来就选择哪个方向。在本例中，三级菜单是从二级菜单的右侧弹出的；又由于我希望一、二、三级菜单显示一个逐级下降的外观，所以选择了“右下”方向。

“显示菜单图标”这个是指提示存在下级菜单的那个图标。在本例中就是二级菜单上“Joomla之门”右侧那两个白色大于号（>>），这个图标提示该项目存在下级菜单。如果你不想显示，选择“否”即可。

“菜单图标位置”说的是上一条中那个图标显示在什么位置。一般来说，当然是显示在下级菜单弹出的位置。本例中下级菜单从右侧弹出，因此选择让这个小图标显示在右侧。当然了，如果你在上一条中选择了“否”，这一条的设置就没有意义。

“上端位置”和“左侧位置”这两条是专门限定二级菜单的相对位置的。由于JA Transmenu使用了[[Javascript]]来实现滑动效果，因此在某些网站的模板中可能出现奇怪现象：就是二级菜单弹出的位置距离其父级菜单项目有一定距离。那么我们就可以通过这两个参数来调整。这里只能填写整数数字，不需要填写单位，默认为“像素”（pixel）。如果你想要将二级菜单向右移动，“左侧位置”就填写正整数；如果需要向下移动，“上端位置”就填写正整数。如果需要向左、向上移动呢？分别填写负整数即可，如“左侧位置”填 -200 ，就表示二级菜单向左移动200像素。在实际应用中，是否需要移动，移动多少，需要用户在前台观看效果，刷新页面，进行调整。

“下级菜单水平留白”和“下级菜单垂直留白”分别指三级以后的菜单在弹出时其顶端距离父级菜单右上角的水平和垂直距离。例如，在本例中，需要三级菜单紧贴二级菜单右侧，因此将“下级菜单水平留白”设为“1”（单位：像素）；希望三级菜单弹出时略低于其父级菜单，因此将“下级菜单垂直留白”设为5。

设置完成后，将此模块发布到原来展示topmenu的模块位置，然后刷新前台页面，就应该看到滑动菜单的效果了。

==自定义JA Transmenu滑动菜单的样式==
细心的读者可能已经发现，上述参数中没有针对滑动菜单的字体、颜色、背景等等作出定义。难道所有JA Transmenu的用户都使用同一个效果吗？当然不是。

按理来说，这些设置也应该出现在后台参数中，这样更符合Joomla的操作习惯，也方便用户自定义菜单外观。可是，该模块的作者，JoomlArt团队正在忙着制作、销售专业模板，根本没有计划改进这个模块。所以，我们就自己动手吧。

我们要用到三个文件：transmenu.js、transmenuh.css或transmenuv.css。在安装之后，它们位于 /modules/ja_transmenu/ 目录中。我之所以用“或”，是因为后面两个文件只用一个。具体哪一个取决于你所定义的一级菜单的方向，即后台参数中“菜单类型”，如果是“水平”，就用前者；“垂直”则用后者。这两个文件名末尾的h和v已经说明了这一点。

在transmenu.js这个文件的第45行，我们只设定一个内容：TransMenu.backgroundColor，它表示次级菜单的背景颜色。其余样式均在CSS文件中。

在本例中，我们设定了前台菜单为“水平”，因此我们打开transmenuh.css这个文件，逐个设置菜单的字体、颜色、背景、透明度、鼠标指向时的颜色变化、点击之后的链接颜色等等。我在transmenuh.css这个文件中用中文解释了部分代码的含义，transmenuv.css这个文件没有注释，不过我相信大同小异。请各位会员自己按照需要调整吧。

如果你建立了一个类型为“占位符”的一级菜单项，以强制访客点击二级菜单，那么你会发现该占位符的外观与其他同级菜单链接迥然不同，非常难看。既然是外观，那么就可以通过CSS来修改：打开 /modules/ja_transmenu/ 文件夹里面的transmenuh.css（如果是垂直菜单则为transmenuv.css），大约在116行，找到：
 a.mainlevel-trans:link, a.mainlevel-trans:visited {
将其修改为：
 a.mainlevel-trans:link, a.mainlevel-trans:visited, .mainlevel-trans {
这样就等于给“占位符”定义了与其他同级可点击链接相同的外观。

这时，在前台可以看到“占位符”类型的菜单项目也有了相同的字号、字体、颜色和背景色。但是，当我们把鼠标指向这个“占位符”类型的菜单项目时，就露出了马脚：鼠标没有变成一只手的样子，而是普通的“I”光标符号。由于大多数人已经习惯了鼠标指向菜单时必然是手形符号，那么现在这种情况就容易让访客感到沮丧。

Ok，好在CSS也能伪装这一点。在上面修改的代码下面一行，插入一句：
 cursor: hand;
这句代码意思是只要鼠标进入菜单区域，就一直显示手形外观。

还有一处需要修改，因为如果将一级菜单设置为“占位符”类型，则点击其二级菜单之后，一级菜单成了“当前菜单”（active menu），这时该一级菜单的外观又不那么美观了。

修改方法是在CSS文件中140行左右，找到：
 a.mainlevel_active-trans, a.mainlevel_active-trans:visited {
修改为：
 a.mainlevel_active-trans, a.mainlevel_active-trans:visited, span.mainlevel_active-trans{
这是因为“占位符”型的一级菜单项目不是链接（a），而是span。

==JA Transmenu的缺点==
这个滑动菜单模块也不是完美的。最重要一点就是：在每个网站只能为一个菜单模块实现滑动效果。如果我们既要在topmenu实现多级滑动，又要在mainmenu实现多级滑动，那么这个模块做不到。即使我们通过模块列表上的“Copy”按钮可以复制一份，但是我们无法复制 /modules/ja_transmenu/ 这个目录。

==参考来源==
http://www.joomlagate.com/article/joomla10-tutorial/make-multi-level-slide-menu-with-ja-transmenu/page-2/

{{Joomla 1.0}}

[[category:Joomla|Y]]
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*