Добавить класс в главное меню ul без использования модуля в Drupal 7

Спасибо за вашу помощь. Вот исправленный рабочий код, чтобы получить учебник, о котором я упоминал в своем исходном посте, для работы с Drupal 7:

Примечание. Здесь я использую главное меню как блок.

CSS:

ul.menu {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: url(topnav_bg.gif) repeat-x;
    z-index:999;
}



ul.menu li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}



ul.menu li a{
    padding: 10px 5px;
    color: #000;
    display: block;
    text-decoration: none;
    float: left;
}

ul.menu li a:hover{
    background: url(topnav_hover.gif) no-repeat center top;
}


ul.menu li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(images/bullet.png) no-repeat center top;
}


ul.menu li span{background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/


ul.menu li ul {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display:none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}

ul.menu li ul.menu li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}


html ul.menu li ul.menu li a {
    float: left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}


html ul.menu li ul.menu li a:hover { 
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

jQuery:

jQuery(function($) {


    $("ul.menu li ul").parent().append("<span></span>"); 

    $("ul.menu li span").click(function() { //When trigger is clicked...


        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

Частичная страница.tpl.php:

<?php if ($page['navigation'] || $main_menu): ?>
      <div id="navigation"><div class="section clearfix">

        <?php print theme('links__system_main_menu', array(
          'links' => $main_menu,
          'attributes' => array(
            'id' => 'main-menu',
            'class' => array('links', 'inline', 'clearfix'),
          ),
          'heading' => array(
            'text' => t('Main menu'),
            'level' => 'h2',
            'class' => array('element-invisible'),
          ),
        )); ?>

        <?php print render($page['navigation']); ?>

      </div></div><!-- /.section, /#navigation -->
    <?php endif; ?>

Эта реализация работает без необходимости вводить какие-либо дополнительные классы в меню HTML Drupal.

Я использую модуль блока меню drupal и хочу добавить в пункт главного меню (первый уровень) класс css для такой адаптивной навигации jQuery.

http://jasonweaver.name/lab/flexiblenavigation/

<nav>
        <ul id="nav" role="navigation">
            <li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #1</a>
                <ul class="sub-menu">
                    <li><a href="#content">Sub 1 Item #1</a></li>
                    <li><a href="">Sub 1 Item #2</a></li>
                    <li><a href="">Sub 1 Item #3</a></li>
                    <li><a href="">Sub 1 Item #4</a></li>
                </ul>
            </li>

            <li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #2</a>
                <ul class="sub-menu">
                    <li><a href="">Sub 1 Item #1</a></li>
                    <li><a href="">Sub 1 Item #2</a></li>
                    <li><a href="">Sub 1 Item #3</a></li>
                </ul>
            </li>

            <li class="top-level"><a href="">Item #3</a>
            </li>
            <li class="top-level item-with-ul"><a href="" class="link-with-ul">Item #4</a>
                <ul class="sub-menu">
                    <li><a href="">Sub 1 Item #1</a></li>
                    <li><a href="">Sub 1 Item #1</a></li>
                    <li><a href="">Sub 1 Item #1</a></li>
                </ul>
            </li>

            <li class="top-level"><a href="">Item #5</a>
            </li>           
        </ul>                                           
    </nav>

Мне нужен класс css в <a href=""></a> Link и первом классе <li></li>.

См. товар с ul и ссылку с ul

Здесь вы видите мой запущенный Drupal 7

Немного непонятно, в чем у вас проблема. Также кажется, что вы немного не уверены, как работает таргетинг css. Первоначальный комментарий Blender выше - это один из способов нацеливания (хотя это должен быть класс, а не идентификатор для topnav, поскольку ваш html имеет его как класс).

ul.topnav > li > ul

Это применит стили к любому второму уровню ul, как сказал Блендер. Кроме того, поскольку ваш второй уровень уже имеет класс subnav, тот же таргетинг может быть достигнут следующим образом:

.subnav

предполагая, что класс не появляется в другом месте или

.topnav .subnav

если он используется в другом месте, кроме списка topnav.

Однако кажется, что ваш вопрос может заключаться в том, как настроить таргетинг на конкретный subnav в меню навигации. Один из способов может быть:

.topnav > li:hover .subnav

который будет активировать стили только при наведении курсора мыши на конкретный li, в котором находится subnav. Если я могу предположить, что ваши теги a в конечном итоге будут иметь настоящие hrefs, тогда вы также можете специально ориентироваться на них. Например, если ваша домашняя ссылка <a href="/Home.html">Home</a>, то

a[href^=Home.html] + ul

будет соответствовать ul, который следует сразу за этой ссылкой (похоже, это то, что вы упоминаете в своем комментарии).

Для Drupal 7 попробуйте поместить что-то вроде этого в файл template.php вашей темы:

/**
 * Implements template_preprocess_menu_tree().
 */
function MY_THEME_preprocess_menu_tree(&$variables) {

  // Use the devel module to inspect the theme hook suggestions
  // for your menu. For my particular theme and main menu, the
  // suggested theme hook is menu_tree__primary
  //dpm($variables);

}

/**
 * Implements theme_menu_tree__primary().
 */
function MY_THEME_menu_tree__primary($variables) {
  return '<ul class="foo bar">' . $variables['tree'] . '</ul>';
}

Предостережение в отношении этого подхода заключается в том, что мы жестко кодируем имя класса, поэтому он не позволит никакому другому модулю иметь право голоса в именах классов, которые появляются здесь. Я клянусь, что есть способ подключиться к построению меню на уровне массива рендеринга, где мы можем легко добавлять/удалять классы в массив классов атрибутов, но я не могу отследить этот подход прямо сейчас. .