Question

我通过Materialise CSS Framework制作了一个WordPress主题，但我遇到了导航栏的问题。这是我的导航栏的图片：http://postimg.org/image/b27td128d/ 如您所见DropDown链接有问题并且默认情况下已打开，在Mobile屏幕中也是如此。

这里是Navbar代码：

<div class="navbar-fixed">
        <nav>
              <div class="nav-wrapper">
                <a href="<?php bloginfo('url'); ?>" class="brand-logo"><?php bloginfo('title'); ?></a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
                <ul class="right hide-on-med-and-down">
                  <?php wp_nav_menu(); ?>
                </ul>
                <ul class="side-nav" id="mobile-demo">
                    <?php wp_nav_menu(); ?>
                  </ul>
              </div>
        </nav>
</div>

我该如何解决这个问题？

Answer 1

wp_nav_menu会生成一个列表及其ul。但是，您可以单独在菜单中提及ul类和ID，

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper">
      <a href="<?php bloginfo('url'); ?>" class="brand-logo"><?php bloginfo('title'); ?></a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'right hide-on-med-and-down'
        ));
      ?>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'side-nav',
          'menu_id' => 'mobile_demo'
        ));
      ?>
    </div>
  </nav>
</div>

您可以在此处观察menu_class和menu_id分别对应列表的类和ID。您甚至不需要使用ul标记。

Answer 2

我正在实现相同的菜单，我用这种方式解决了：我用items_wrap设置<ul id="slide-out">来重新创建相同的菜单实体化结构，它似乎有效：

  <div class="nav-wrapper">
      <a href="<?php bloginfo('url'); ?>" class="logo"><?php bloginfo('title'); ?></a>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'right hide-on-med-and-down'
        ));
      ?>
      <?php
        wp_nav_menu(array(
          'menu_class' => 'side-nav',
          'menu_id' => 'mobilemenu',
          'items_wrap'      => '<ul id="slide-out" class="%2$s">%3$s</ul>'  
        ));
      ?>
      <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </div>

Answer 3

我修改了已经存在的Bootstrap walker，并添加了一些自定义功能，使其与MaterialiseCSS一起使用。似乎工作正常，但我确信代码中有些东西可以改进，因为我不是一个很大的PHP用户：）

https://github.com/eamonnmag/wp-bootstrap-navwalker

Answer 4

使用Wordpress菜单使用Materialise CSS（子菜单）的简单方法是在脚本中添加以下行：

$( document ).ready(function(){

// Add class to ul parent
$('#primary-menu').addClass('hide-on-med-and-down');

// Add to sub menus unique ID
$( ".sub-menu" ).each(function(index) {
    $(this).addClass( "dropdown-content" );
    $(this).attr('id', 'dropdown' + index);
});

// Get li parents, identify which have sub-menus
$( "ul#primary-menu li.menu-item-has-children > a" ).each(function(index) {
    $(this).addClass('dropdown-button');
    $(this).attr('data-activates', 'dropdown' + index);
});

// Configure dropdown
$(".dropdown-button").dropdown({
    hover: false
});
});

只需查看Materialise结构并在Wordpress菜单中复制它;）

Answer 5

此代码适用于我：https://github.com/Kail0/wp-materialize-navwalker 在header.php中

    <nav role="navigation">
    <div class="nav-wrapper container">
        <a id="logo-container" href="#" class="brand-logo">Logo</a>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="fa fa-bars" aria-hidden="true"></i></a>
        <?php
                    wp_nav_menu( array(
                        'menu' => 'Primary',
                        'theme_location'=>'Primary',
                        'container' => '', 
                        'menu_class' => 'right hide-on-med-and-down',
                        'walker' => new wp_materialize_navwalker()
                    ));
        ?>
    </div>
</nav>

这个代码用于代理

footer.php

    $(function() {

    elemSwap = function() {
        if ($(window).width() < 992) {

            $('.nav-wrapper.container > ul').attr("id", "nav-mobile");
            $('.nav-wrapper.container > ul').removeClass('right hide-on-med-and-down').addClass('side-nav');

            $('.drag-target').on('click', function() {
                $('.side-nav').removeAttr('style');
            });
            $('nav .button-collapse').click(function(event) {
                $('.side-nav').css({
                    "transform": "translateX(0%)"
                });
            });
            $('#menu-menu .dropdown-button.main-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: true, // Does not change width of dropdown to that of the activator
                hover: false, // Activate on hover
                belowOrigin: true, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });
            // nested dropdown initialization
            $('#menu-menu .dropdown-button.sub-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: false, // Does not change width of dropdown to that of the activator
                hover: false, // Activate on hover
                gutter: ($('.dropdown-content').width() * 3) / 3.05 + 3, // Spacing from edge
                belowOrigin: false, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });

        } else {
            $('.nav-wrapper.container > ul').attr("id", "menu-menu");
            $('.nav-wrapper.container > ul').removeClass('side-nav').addClass('right hide-on-med-and-down');
            // main dropdown initialization
            $('#menu-menu .dropdown-button.main-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: true, // Does not change width of dropdown to that of the activator
                hover: true, // Activate on hover
                belowOrigin: true, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });
            // nested dropdown initialization
            $('#menu-menu .dropdown-button.sub-menu-item').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrain_width: false, // Does not change width of dropdown to that of the activator
                hover: true, // Activate on hover
                gutter: ($('.dropdown-content').width() * 3) / 3.05 + 3, // Spacing from edge
                belowOrigin: false, // Displays dropdown below the button
                alignment: 'left' // Displays dropdown with edge aligned to the left of button
            });
        }
    }

    elemSwap();

    $(window).resize(elemSwap);
});

Answer 6

您应该像下面这样：

'menu_class'     => 'menu right hide-on-med-and-down'

第一个单词必须是'menu'。

Materialize Menu在WordPress上不起作用

6 个答案: