0

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

这里是导航栏代码：

<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>

我怎样才能解决这个问题？

4

6 回答 6

0

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标签。

于 2015-04-27T11:55:50.893 回答
0

我正在实现相同的菜单，我以这种方式解决了：我设置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>
于 2015-04-29T16:38:12.567 回答
0

我已经修改了已经存在的 Bootstrap walker，并添加了一些自定义项以使其与 MaterialiseCSS 一起使用。似乎工作正常，但我确信代码中有一些可以改进的地方，因为我不是 PHP 大用户 :)

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

于 2015-11-29T23:34:24.413 回答
0

你应该像下面这样：

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

第一个词必须是“菜单”。

于 2018-06-28T15:31:20.697 回答
0

这段代码对我有用：https ://github.com/Kail0/wp-materialize-navwalker in 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>

这个代码用于响应

页脚.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);
});
于 2017-09-10T08:16:04.977 回答
0

使用您的 Wordpress 菜单与 Materialize 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
});
});

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

于 2017-02-22T19:58:04.670 回答