【问题标题】:add css class to "main menu" (drupal, integration with columnal grid system)将 css 类添加到“主菜单”(drupal,与柱状网格系统集成)
【发布时间】:2012-07-03 09:26:06
【问题描述】:

我有一个问题要问你。

我正在尝试用 drupal 7 做一个网站,除了一些小问题外,它几乎完成了,我需要主菜单的第一级有一些自定义 css 类以便将其集成到columnal,这个是我打印主菜单的方式:

<?php
    print theme(
        'links__system_main_menu',
        array(
            'links' => $main_menu,
            'attributes' => array(
                            'id' => 'main-menu',
                            'class' => array('menu')
            )
        )
    );
?>

这就是我得到的:

<ul id="main-menu" class="menu">
    <li class="menu-NNN first active">
        <a href="url" title="" class="active">Home</a>
    </li>
    <li class="menu-NNN">
        <a href="url">click me</a>
    </li>
    <li class="menu-NNN">
        <a href="url">click me</a>
    </li>
    <li class="menu-NNN">
        <a href="url">click me</a>
    </li>
    <li class="menu-NNN last">
        <a href="url">click me</a>
    </li>
</ul>

我需要主菜单的第一级有“col_1”类:

<ul id="main-menu" class="menu">
    <li class="menu-NNN first .col_1 active">
        <a href="url" title="" class="active">Home</a>
    </li>
    <li class="menu-NNN .col_1">
        <a href="url">click me</a>
    </li>
    <li class="menu-NNN .col_1">
        <a href="url">click me</a>
    </li>
    <li class="menu-NNN .col_1">
        <a href="url">click me</a>
    </li>
    <li class="menu-NNN .col_1 last">
        <a href="url">click me</a>
    </li>
</ul>

布局看起来像这样:

/****************************************************************************************
*   *    .row                                                                       *   *
*   *********************************************************************************   *
*   *    #logo.col_5         *   * .pre_1|              .col_5              |.suf_1 *   *
*   *                        *   *       |                                  |       *   *
*   *                        *   *       |                                  |       *   *
*   *                        *   *       |__________________________________|       *   *
*   *                        *mar*       |.col_1|.col_1|.col_1|.col_1|.col_1|       *   *
*   *                        *gin*padding| menu1| menu2| menu3| menu4| menu5|padding*   *
*mar*********************************************************************************mar*
*gin*                                                                               *gin*
****************************************************************************************/
//I'm expecting to have just 5 links in the main menu

也许我可以使用 css 手动设置宽度和边距,但我认为这不对 方法,因此,“使用 CSS 为每个子元素设置属性”将不起作用,我也尝试使用“MYTHEME_menu_link”,但这会将属性添加到除主菜单之外的所有菜单,所以这也行不通。

所以问题是:

还有其他方法可以将 css 类添加到 drupal 主菜单的第一级吗?

【问题讨论】:

  • 是否可以选择使用 javascript?你在用 jquery 吗?
  • 我知道这是可能的,也许我可以将它作为最后的手段,但我认为使用 javascript 或从列中克隆 CSS 属性将是一种解决方法,因为这不是正确的方法

标签: php css drupal content-management-system drupal-7


【解决方案1】:

尝试使用Menu CSS Names module

【讨论】:

  • 或许可行,但没有其他方法可以在没有外部模块的情况下实现目标。
  • 对不起,我找到了一种无需外部模块即可按我想要的方式打印主菜单的方法。
【解决方案2】:

如果您希望使用自己的模块或主题的 template.php 文件实现相同的目标,您可以使用自己的 drupal 的 theme_menu_link() 实现

示例代码:

function [THEME_OR_MODULE]_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = "";

  $element['#attributes']['class'][] = "col_1";

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

【讨论】:

  • 对不起,我在问题中说该功能适用​​于除主菜单以外的所有菜单。
【解决方案3】:

经过一番调查。我找到了一种方法来实现我的目标,而无需使用解决方法或基于此article 的任何外部模块(如何在 Drupal 7 中为 Bartik 创建下拉菜单),我使用了 'variable_get'、'menu_tree' 和 'drupal_render' 来覆盖变量 'main_menu' 带有一个字符串,其中包含我需要的格式的菜单,以覆盖变量 'main_menu' 我使用了 'THEME_process_page';

function MYTHEME_process_page(&$variables) {
    global $language;

if($variables['main_menu']){

    $tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
    foreach($tree as $key => $val){

        if(isset($tree[$key]['#href'])){ //just to make sure this is a link

            if($language->language!=$tree[$key]["#localized_options"]["langcode"])
                unset($tree[$key]);
            else
                $tree[$key]['#attributes']['class'][] = 'col_1';

        }

    }

    $variables['main_menu'] = drupal_render($tree);

}

}

在此修改之前,'main_menu' 是一个数组,但现在它是一个包含菜单的字符串,所以,现在,我必须替换模板中的函数 'theme'。

<?php
    print theme(
        'links__system_main_menu',
        array(
            'links' => $main_menu,
            'attributes' => array(
                            'id' => 'main-menu',
                            'class' => array('menu')
            )
        )
    );
?>

这样的东西;

<?php print $main_menu; ?>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-10-27
    • 1970-01-01
    • 1970-01-01
    • 2012-11-06
    • 2010-12-24
    • 1970-01-01
    • 2012-07-08
    相关资源
    最近更新 更多