用dw做网站的步骤,pc手机模板网站建设,无锡网站建设收费,网站程序开发技术转自http://www.joomlagate.com “弹出菜单”这个说法本来不规范#xff0c;尽管你我都明白这是什么意思#xff0c;而实际上我们所理解的那个菜单样式英文说法是“Slide Menu”#xff08;滑动菜单#xff09;#xff0c;如果要用“弹出菜单”就成了“Popup Menu”。当然…转自http://www.joomlagate.com “弹出菜单”这个说法本来不规范尽管你我都明白这是什么意思而实际上我们所理解的那个菜单样式英文说法是“Slide Menu”滑动菜单如果要用“弹出菜单”就成了“Popup Menu”。当然“走的人多了也便成了路”我考虑再三还是尊重中国风俗在文章标题中使用了错误的说法希望不要误导了各位。 在Joomla世界建造一个滑动菜单可以有N多选择。JA Transmenu 模块是其中一个下图中所演示的菜单就是用这个模块做成的。我之所以首先来演示这个模块是因为以下两点原因 1、它是免费的。 2、简单易用。 在继续阅读之前请用鼠标指向上面的菜单看看其弹出效果你甚至可以点击其中某些链接。然后我们再来回答“怎么做”这个问题。 1、创建一个点不动的菜单链接 在上面演示中一级菜单中的“酷站巡展”这个链接是点不动的。这个效果适合于强制访客点击二级菜单的需要。有人认为在新建菜单项时选择“占位符/分隔符”Separator / Placeholder就能造成一个点不动的链接因为它不指向任何目标。不过我发现这种办法所生成的菜单链接其样式很糟糕无法与其他同级链接保持一致因为它的CSS类不是mainlevel。 在本文的第一版我曾经认为将某个一级菜单项目的类型选择为“Link-URL”然后将此URL定义为“#”符号即可建成无法点击的菜单项。经过测试这个方法无法做到。我们还得用“占位符”来建立这种菜单项。 当然我们需要通过CSS使占位符的外观与可以点击的链接相同。具体办法后面详述。这个小技巧虽然与滑动菜单没有直接联系但是与上面演示的却有联系因此我在此也捎带说一下。 2、建立多级菜单 Joomla自身允许创建多级菜单问题是它无法展示出滑动效果。因此我们先解决第一步创建多级菜单。 使用超级管理员身份登录到Joomla网站后台点击菜单上的“Menu”然后选择一个你想实现多级滑动的菜单比如说topmenu点击其名称。这时会展示出所有已属于topmenu的菜单链接我猜想你那里很可能还是单级的。 点击右上角工具栏上的“New”按钮新建一个菜单项目。根据你的目标选择菜单类型例如要指向FireBoard论坛就选择“component”类型。然后点击“Next”按钮。实现多级的关键就在下面这个页面上—— 仔细看看“Parent Item”这个设置中文版本应该是“上级项目”默认是选择了“Top”即“顶级”如下图所示所以你新建的菜单链接都属于第一级。假如现在我们要将Fireboard论坛的菜单放到第二级那么就必须在此为它选择上级菜单项目。选中之后点击工具栏上的“Save”按钮保存新菜单项。 保存之后又回到了刚才的topmenu内容列表。这时可以看到新建立的菜单位于某个一级菜单之下并且在版面上向右增加了缩进很容易就能看出来父级菜单和子级菜单的关系。 如果要将现有的某个一级菜单变为二级菜单只需要在topmenu内容列表上点击其名称进入其设置页面然后将“Parent Item”这里选择为Top之外的其他一级菜单项即可。 同理你可以建立三级、四级、…… N 级菜单。 3、完成多级滑动菜单 从本站下载JA Transmenu 2.0 简体中文版这是一个标准模块。从Joomla后台安装它。这个模块本身没有任何内容它的任务是在前台展示管理员指定的某个菜单如上面提到的topmenu。 既然我们要通过JA Transmenu来展示topmenu的内容那么原来的topmenu就必须取消发布。否则前台就会出现两个重复的topmenu内容。 将原来的topmenu取消发布之后我们点击后台模块列表中的JA Transmenu名称进入其设置页面。可以看出设置参数并不多。 前两个参数都是关于CSS的为了便于用户自定义菜单的样式。我们先从浅处入手不必理会这里。 “菜单名称”这里需要管理员指定用JA Transmenu来展示哪个菜单模块因为它无法包揽所有菜单。我们本例中就指定使用topmenu吧因为刚才我们为topmenu建立了多级菜单链接。 “菜单类型”是要管理员决定前台的滑动菜单其一级菜单是水平放置还是垂直放置比如本例中的topmenu我们一般都是习惯于水平放置因此在这里选择“水平”即可。 “菜单方向”则是指二级菜单的弹出方向不要管三级、四级因为那些默认都是水平的。二级菜单需要指定方向是因为一级菜单的方向有两种可能。既然我们将一级菜单设计成了“水平”那么二级菜单应该是在垂直方向上。这里有两种选项向上或者向下。很显然一般来说我们希望二级菜单向下弹出就如同本文第一页展示的那个菜单。不过也难免某些用户希望出现Windows的开始菜单那样的效果那么你选择“向上”即可。 “菜单相对位置”是指二级以下的菜单弹出方向。因为前面的参数已经把一级、二级菜单方向都定义了。所以我们希望三级菜单从哪里弹出来就选择哪个方向。在本例中三级菜单是从二级菜单的右侧弹出的又由于我希望一、二、三级菜单显示一个逐级下降的外观所以我选择了“右下”方向。 “显示菜单图标”这个是指提示存在下级菜单的那个图标。在本例中就是二级菜单上“Joomla之门”右侧那两个白色大于号这个图标提示该项目存在下级菜单。如果你不想显示选择“否”即可。 “菜单图标位置”说的是上一条中那个图标显示在什么位置。一般来说当然是显示在下级菜单弹出的位置。本例中下级菜单从右侧弹出因此我选择让这个小图标显示在右侧。当然了如果你在上一条中选择了“否”这一条的设置就没有意义。 “上端位置”和“左侧位置”这两条是专门限定二级菜单的相对位置的。由于JA Transmenu使用了Javascript来实现滑动效果因此在某些网站的模板中可能出现奇怪现象就是二级菜单弹出的位置距离其父级菜单项目有一定距离。那么我们就可以通过这两个参数来调整。这里只能填写整数数字不需要填写单位默认为“像素”pixel。如果你想要将二级菜单向右移动“左侧位置”就填写正整数如果需要向下移动“上端位置”就填写正整数。如果需要向左、向上移动呢分别填写负整数即可如“左侧位置”填 -200 就表示二级菜单向左移动200像素。在实际应用中是否需要移动移动多少需要用户在前台观看效果刷新页面进行调整。 “下级菜单水平留白”和“下级菜单垂直留白”分别指三级以后的菜单在弹出时其顶端距离父级菜单右上角的水平和垂直距离。例如在本例中我需要三级菜单紧贴二级菜单右侧因此我将“下级菜单水平留白”设为“1”单位像素我希望三级菜单弹出时略低于其父级菜单因此我将“下级菜单垂直留白”设为5。 设置完成后将此模块发布到原来展示topmenu的模块位置然后刷新前台页面就应该看到滑动菜单的效果了。 4、自定义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; 这句代码意思是只要鼠标进入菜单区域就一直显示手形外观。你可以在我正在建设的一个新网站 http://www.spinechina.org 上面看看这个效果。 还有一处需要修改因为如果将一级菜单设置为“占位符”类型则点击其二级菜单之后一级菜单成了“当前菜单”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。 如果还发现其他外观问题我相信都可以在CSS文件中得到改善。这里不能一一列举有关CSS知识可以参考《CSS权威指南》PDF中文版 。 如果你使用了其他滑动菜单模块一样可以通过CSS来使得“占位符”型菜单链接看起来与正常链接没什么区别。或许CSS语句不通但是道理相同所谓“触类旁通”各位看官自己摸索吧。 5、JA Transmenu的缺点 这个滑动菜单模块也不是完美的。最重要一点就是在每个网站只能为一个菜单模块实现滑动效果。如果我们既要在topmenu实现多级滑动又要在mainmenu实现多级滑动那么这个模块做不到。即使我们通过模块列表上的“Copy”按钮可以复制一份但是我们无法复制 /modules/ja_transmenu/ 这个目录。当然了如果高手从代码修改起或许可以制作出一个复制件但这已经远远超出了我这个菜鸟的能力范围留待高人讲解吧。转载于:https://www.cnblogs.com/JuneZhang/archive/2010/11/02/1867020.html
