跳转到主要内容
东方龙马 提交于 1 April 2013

最近咨询Drupal里如何实现下拉菜单的朋友非常多,虽然熟悉的朋友可能觉得比较简单,但是对于新手来说,有关模块和第三方js库,通常会被弄晕了。

这里简要介绍一下Drupal下的下拉菜单如何实现。其实,下拉菜单的实现方法有很多,大致有以下几种实现方法:

  • 通过superfish模块来实现
  • 通过nice_menus模块来实现
  • 使用superfish第三方js插件配合当前的主题实现
  • 自己写JS或者通过CSS3来实现

在很早之前我有翻译过一篇文章介绍在Drupal6下,如何使用superfish这个js插件来实现下拉菜单,详细链接请看这里:《轻松添加Superfish 下拉菜单到drupal 主题》。该方法也同样可应用在Drupal7下,只需稍微改一下便可。这里我们不做介绍。

今天主要是介绍superfish模块。

模块地址:

http://drupal.org/project/superfish

 

模块的安装:

在模块的页面,已经给出了详细的步骤,我们只需按部就班操作即可:

  1. 下载Superfish library JS库(如果当前使用的是superfish 7.x-1.8的话,请使用library v1.1)。下载好以后解压,比如,我当前解压以后,当前的文件夹名为“mehrpadin-Superfish-for-Drupal-9dbdd14”,请重命名为“superfish”(温馨提示:请注意这里都是小写哦!),然后放置到“sites/all/libraries/superfish”这个目录里,如下图所示:

  1. 下载Libraries 模块 ,解压至:/sites/all/modules
  2. 下载Superfish 模块 ,解压至:/sites/all/modules
  3. 开启superfish模块。

备注:

区分libraries JS库与libraries模块

对于新手来说,最容易弄糊涂的就是libraries有js库和模块两个同名的文件夹。这里简要分析一下,在drupal下通常是将第三方的js库单独放置在一个地方,这就是libraries库目录,通常是放置在“sites/all/libraries”目录,而模块通常是放置在“sites/all/modules/libraries”:

 

Superfish模块的配置

依次进入“配置” –“用户配置” – “Superfish”( admin/config/user-interface/superfish),这里有2个地方可以配置,一是可以设置superfish生成几个区块,这里我们保持默认的。另外一个是superfish默认加载的js文件,你可以根据自己的需要设置哪些js需要加载,对于不需要的,直接删除那一行即可。这里我们暂且保存默认。

 

现在准备工作已经做好了,剩下的就是区块的配置了。

依次进入“结构” – “区块”( admin/structure/block),进入到区块的管理界面,找到“Superfish 1 (Superfish)”,点击后面的“配置”,进入到该区块的管理页。

这里有一些配置项,默认的“Menu Parent”的值是“<主菜单>”,如果是其他菜单需要以下拉菜单方式显示的话,这里可以选择其他菜单,“Menu Type”的有三个选项供你选择:“Horizontal”(横向)、“Vertical”(纵向)、“NavBar”,这里根据需要选取。还有很多的配置项,可以依据自己的喜好设置。

最后将该区块设置一个区域显示。

接下来,在“主菜单”下添加几个菜单项,记得添加几个有二级菜单项的菜单。

最后,看一下我们前台的效果:

下拉菜单就这样做好了,如果需要修改样式,请在你的主题下的css文件里添加css覆写默认的样式。

其实,步骤很简单,大部分的内容是介绍一些常识。希望这篇教程对你有所帮助。

Drupal 版本