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

Question

Я пытаюсь заставить мою тему добавлять имена классов CSS к элементам 'ul' в главном меню в Drupal 7.

Код макета HTML:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>

</ul>

Как видите, ul первого уровня имеет имя класса topnav, следующий вложенный ul имеет имя класса subnav.Я подключаю раскрывающееся меню jQuery и хочу применить его без использования модулей.Да, я пробовал модуль «Атрибуты меню», но он здесь не работает.

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

Редактировать: Хорошо, я продвинулся дальше.У меня есть меню с подпрограммами, в которых jquery изначально скрывает подпрограммы, однако я не могу заставить jquery отображать подпрограммы в данном событии: наведите курсор на «ul.menu li span»

Вот мой 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;
}


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;

    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').hide();

    $("ul.menu li ul").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

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

                                        // alert("No error!"); 

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

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.menu li 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"
    });

});

Если я отредактирую эту строку: $(this).parent().find("ul.menu li ul").slideDown('fast').show(); в это: ("ul.menu li ul").slideDown('fast').show(); Она покажет ВСЕ подменю для всех родительских элементов - очевидно, я толькохочу показать подменю родительского меню, над которым я нахожусь.Когда я пытаюсь добавить обратно в $(this).parent()..., он не будет отображать никаких сабов вообще.

Спасибо.

Answer 1

Спасибо всем за помощь. Вот исправленный рабочий код, чтобы учебник, о котором я упоминал в моем исходном посте, работал с 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"
    });

});

Частичное page.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.

Answer 2

Я использую модуль блока меню 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>

Iнужен класс css в <a href=""></a> Link и сначала <li></li> class.

См. item-with-ul и link-with-ul

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

Answer 3

Для 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>';
}

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

Answer 4

Немного неясно, в чем ваша проблема. Также кажется, что вы немного не уверены, как работает таргетинг на CSS. Исходный комментарий Блендера, приведенный выше, является одним из способов нацеливания (хотя это должен быть класс, а не идентификатор для 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, который следует сразу за этой ссылкой (что, по-видимому, является тем, что вы упоминаете в своем комментарии).