php - site - modules in drupal 8

agregue la clase css al "menú principal"(drupal, integración con el sistema de cuadrícula)

Question

Tengo una pregunta para ti.

Intento hacer un sitio web con drupal 7, casi está listo, salvo por algunos pequeños problemas, necesito que el primer nivel del menú principal tenga algunas clases de CSS personalizadas para integrarlo en columna , esta es la forma en que imprimo el menú principal:

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

y esto es lo que obtengo:

<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>

Necesito que el primer nivel del menú principal tenga la clase "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>

el diseño se vería así:

/****************************************************************************************
*   *    .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

tal vez pueda establecer manualmente el ancho y el margen con css, pero creo que este no es el enfoque correcto, por lo tanto, "usar CSS para establecer propiedades en cada sub elemento" no funcionará, también intento usar "MYTHEME_menu_link" pero eso agrega las propiedades a todos los menús pero al menú principal, por lo que tampoco funcionará.

entonces la pregunta es:

¿Hay alguna otra manera de agregar clases de CSS al primer nivel del menú principal en drupal?

Answer 1

Después de un poco de investigación. Encontré una manera de lograr mi objetivo sin usar una solución alternativa o un módulo externo basado en este artículo (CÓMO crear menús desplegables para Bartik en Drupal 7), utilicé ''variable_get'', ''menu_tree'' y ''drupal_render'' para anular la variable '' main_menu ''con una cadena que contiene el menú con el formato que necesitaba, para anular la variable'' main_menu ''utilicé'' 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);

}

}

Antes de esta modificación, el ''main_menu'' era una matriz, pero ahora es una cadena que contiene el menú, así que, ahora, tengo que reemplazar la función ''theme'' en el tamplate.

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

Con algo como esto;

<?php print $main_menu; ?>

Answer 2

Intenta usar el módulo de nombres de menú del menú .

Answer 3

Si está buscando lograr el mismo objetivo con su propio módulo o el archivo template.php de su tema, puede usar su propia implementación de theme_menu_link de drupal ()

Código de muestra:

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";
}