将类添加到主菜单 ul，而不使用 Drupal 7 中的模块

Question

我试图让我的主题将 CSS 类名称添加到 Drupal 7 主菜单中的“ul”元素中。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 下拉菜单，并希望在不使用模块的情况下应用它。是的，我已经尝试过“菜单属性”模块，但这在这里不起作用。

我已经搜索了一整天，似乎找不到完整的解决方案。我知道 superfish / 和 sf 附带的其他主题，但我想要自己的解决方案。

编辑： 好吧，我已经更进一步了。我有一个带有 subs 的菜单，jquery 最初隐藏了 subs，但是，我无法让 jquery 在给定事件上显示 subs：将鼠标悬停在“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; ?>

此实现无需将任何其他类注入到 Drupal 的菜单 HTML 中即可工作。

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>

我需要 中的 css 类 链接和第一个

类。

查看 item-with-ul 和 link-with-ul

在这里你可以看到我启动的 Drupal 7

Answer 3

有点不清楚你的问题是什么。您似乎也有点不确定 css 定位是如何工作的。 Blender 上面的原始评论是一种定位方式（尽管它需要是一个类，而不是 topnav 的 id，因为你的 html 将它作为一个类）。

ul.topnav > li > ul

正如 Blender 所说，这会将样式应用于任何第二级 ul 。此外，由于您的第二级已经有一个类 subnav ，因此可以通过以下方式实现相同的定位：

.subnav

假设该类没有出现在其他地方，或者

.topnav .subnav

如果它在 topnav 之外的其他地方使用代码> 列表。

但是，您的问题似乎可能是如何在导航菜单中定位特定的 subnav 。一种方法可能是：

.topnav > li:hover .subnav

这只会激活鼠标悬停在 subnav 所在的特定 li 上的样式。如果我可以假设您的 a< /code> 标签最终将具有真正的 href，那么您也可以通过这些来专门定位。例如，如果您的主页链接是 Home 那么

a[href^=Home.html] + ul

将匹配紧随该链接的 ul (这似乎就是您在评论中提到的）。

Answer 4

对于 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>';
}

这种方法的警告是我们对类名进行硬编码，因此它不允许任何其他模块具有请说出此处出现的类名称。我发誓有一种方法可以在渲染数组级别挂钩菜单的构建，我们可以轻松地向属性类数组添加/删除类，但就我的一生而言，我现在无法追踪该方法。