Question

我正在尝试将我的主题添加到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下拉菜单，想要在不使用模块的情况下应用它。是的，我已经尝试过“菜单属性”模块，但这不起作用。

我一直在寻找，似乎找不到完整的解决方案。我知道sf附带的superfish /和其他主题，但我想要自己的解决方案。

修改好的，我已经进一步了。我有一个子菜单，其中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; ?>

此实现无需在Drupal的菜单HTML中注入任何其他类即可运行。

Answer 2

我使用drupal菜单块模块，并希望为主菜单项（第一级）添加一个用于此类响应式jQuery导航的css类。

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>

我需要<a href=""></a>链接和第一个<li></li>类中的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

仅激活鼠标悬停在li所在的特定subnav上的样式。如果我可以假设您的a标记最终会有真正的href，那么你也可以专门针对那些人。例如，如果您的主页链接是<a href="/Home.html">Home</a>，那么

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

这种方法的警告是我们很难编写类名，所以它不允许任何其他模块在这里出现的类名中有发言权。我发誓有一种方法可以在渲染数组级别挂钩菜单的构建，在那里我们可以轻松地将类附加/删除到属性类数组，但是对于我的生活，我现在无法追踪这种方法

在不使用Drupal 7中的模块的情况下将类添加到主菜单ul

4 个答案: