首页 › Blogs › play 的blog

Nice Menus模块改造

星期五, 2008-09-12 23:57 — play

之前我曾为一个企业设计一个站点，根据当时要求，以HTML页面来架构几乎完全实现需要，就有一个在线发送E-mail的功能，由于这个站点的服务器支持asp和php，编写php的E-mail的功能代码我不会写，只好写asp代码，也很简单。但在站点的制作中企业总是要求改来改去，每改一次就要上传需要更新的HTML文件和相关的CSS文件以及图片，于是下决心用drupal5.10来架构这个站点。

之前的HTML页站点header的导航菜单我用的是jQuery Plugins： droppy来实现多级下拉菜单。

在使用Nice Menus模块为站点实现Primary links多级下拉菜单，然而Nice Menus模块在IE6下的表现令我不能满意。于是又到http://plugins.jquery.com下载droppy，发现版本已经升到0.1.2了。

我的想法就是利用Nice Menus模块生成菜单，然后用droppy勾住菜单

注意：如果用droppy 0.1.2需要安装jquery_update-5.x-2.0.tar.gz，droppy 0.1.2好象需要jquery1.2.x

droppy 使用很简单，看例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" lang="zh-hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>droppy</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.droppy.js"></script>
        <link rel="stylesheet" type="text/css" href="droppy.css" />
        <script type="text/javascript">
          $(function() {
                $('#nav').droppy();
          });
        </script>
</head>

<body>
<ul id="nav">
  <li><a href="#">栏目一</a></li>
  <li>
    <a href="#">栏目一</a>
    <ul>
      <li><a href="#">子栏目一</a></li>
      <li><a href="#">子栏目一</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

代码中的#nav勾住ul 标签的id值

        <script type="text/javascript">
          $(function() {
                $('#nav').droppy();
          });
        </script>

修改模块部分：
文件：nice_menus.module

将这段代码

function nice_menus_menu($may_cache) {
  if (!$may_cache) {
    // We only want to include the JS for IE and not browsers
    // capable of doing everything in css.  We have to put all the JS
    // in drupal_set_html_head so they get called in the right order.
    drupal_set_html_head('<!--[if IE]>
    <script type="text/javascript" src="'. check_url(base_path() .'misc/jquery.js') .'"></script>
    <script type="text/javascript" src="'. check_url(base_path() .'misc/drupal.js') .'"></script>
    <script type="text/javascript" src="'. check_url(base_path() . drupal_get_path('module', 'nice_menus') .'/nice_menus.js') .'"></script>
    <![endif]-->');

    // Add main CSS functionality.
    drupal_add_css(drupal_get_path('module', 'nice_menus') .'/nice_menus.css');
    // Add custom CSS layout if specified.
    if ($custom = variable_get('nice_menus_custom_css', '')) {
      drupal_add_css($custom);
    }
    // Fall back to default layout.
    else {
      drupal_add_css(drupal_get_path('module', 'nice_menus') .'/nice_menus_default.css');
    }
  }
  else {
    $items[] = array(
      'path' => 'admin/settings/nice_menus',
      'title' => t('Nice Menus'),
      'description' => t('Configure Nice Menus.'),
      'callback' => 'drupal_get_form',
      'callback arguments' => array('nice_menus_admin_settings'),
      'access' => user_access('administer site configuration'),
      'type' => MENU_NORMAL_ITEM,
    );
  }

  return $items;
}

修改为：

function nice_menus_menu($may_cache) {
  if (!$may_cache) {
    // We only want to include the JS for IE and not browsers
    // capable of doing everything in css.  We have to put all the JS
    // in drupal_set_html_head so they get called in the right order.

drupal_add_js(drupal_get_path('module', 'nice_menus') . '/jquery_droppy.js');
drupal_add_js(drupal_get_path('module', 'nice_menus') . '/droppy.js');

    // Add main CSS functionality.

    // Add custom CSS layout if specified.
    if ($custom = variable_get('nice_menus_custom_css', '')) {
      drupal_add_css($custom);
    }
    // Fall back to default layout.
    else {
      drupal_add_css(drupal_get_path('module', 'nice_menus') .'/nice_menus_default.css');
    }
  }
  else {
    $items[] = array(
      'path' => 'admin/settings/nice_menus',
      'title' => t('Nice Menus'),
      'description' => t('Configure Nice Menus.'),
      'callback' => 'drupal_get_form',
      'callback arguments' => array('nice_menus_admin_settings'),
      'access' => user_access('administer site configuration'),
      'type' => MENU_NORMAL_ITEM,
    );
  }

  return $items;
}

将下载的droppy解压后将jquery.droppy.js和droppy.css复制到Nice Menus模块目录中，将jquery.droppy.js重命名为jquery_droppy.js，然后URL到/admin/build/themes/settings
Path to custom Nice Menus CSS file:
输入：sites/all/modules/nice_menus/droppy.css

droppy.js的内容：请保存到Nice Menus模块目录中

  $(function() {
    $('#nice-menu-primary').droppy({speed: 100});
  });

编辑主题page.tpl.php

删除：

        <?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
        <?php endif; ?>
        <?php if (isset($secondary_links)) : ?>
          <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
        <?php endif; ?>

添加：

<?php print theme('nice_menu_primary_links'); ?>

保存，收工！

由于是个人需要，这个改动我就需要一个地方用到Nice Menus模块做菜单，没有什么通用性，如果有机会和时间会慢慢研究一下。

突然想到一个方法，是新建一个菜单不用Primary links菜单，然后用droppy勾住，应该也可以吧，回头试试吧，时间太晚，该睡觉了。

Tags: