Nav Walker 用于实现 css答案

【问题标题】：Nav Walker for materialize cssNav Walker 用于实现 css
【发布时间】：2015-04-28 23:53:55
【问题描述】：

我正在尝试使用物化框架制作 WordPress 主题，但我真的对导航栏部分感到困惑。我在互联网上搜索过，但一无所获，似乎没有人使用materialize。

我发现的唯一一件事就是使用 nav_walker 来实现，就像在 bootstrap 中完成一样，但我不知道如何使用 materialize 来实现。

【问题讨论】：

查看此链接34sp.com/hosting-news/blog/…
已经很混乱了！ :(

标签： wordpress navbar nav materialize

【解决方案1】：

我创建了一个 sn-p，它允许您使用 materializecss 为 wordpress 创建一个导航栏。但是，它不允许您在菜单（下拉栏）中创建子项。为此，您需要创建一个自定义的导航步行器。

可以在这里找到 sn-p 和说明： https://github.com/kristofferandreasen/wp_materialize_navigation

它基于 cmets 中链接到的站点 vel。

【讨论】：

我知道这是一篇旧帖子，但它对我帮助很大。 jquery 初始化示例代码中存在问题。 constrain_width 应改为 constrainWidth（即驼峰式大小写，无下划线）

【解决方案2】：

这应该可以完成工作：

<div class="m-container nav">
    <div class="container">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'menu side-nav', 'menu_id' => 'mobile-nav','items_wrap' => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>', ) ); ?>

            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'hide-on-med-and-down' ) ); ?>

        </nav><!-- #site-navigation -->
    <div class="clear"></div>
</div>

（来源：请参阅此处的导航部分：https://www.34sp.com/hosting-news/blog/wordpress-materialized-creating-material-design-theme-pt-1-theme-setup/）

【讨论】：

【解决方案3】：

我提出了这个要点，一个页面 index.php，我在其中使用了 wordpress 菜单。我不相信这是最好的解决方案，但它是一个好的开始并且工作正常。随意改进和使用它。

https://gist.github.com/knoonrx/a27381877cfc9e4826fae28ec2544490

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name') ?></title>
    <link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/materialize.min.css"  media="screen,projection">
    <link type="text/css" rel="stylesheet" href="<?= get_template_directory_uri(); ?>/style.css">

    <style>
        nav .sub-menu {
            position: absolute;
            min-width: 115px;
            display: none;
            transition: all .3s;
            background-color: #ee6e73;
            z-index: 1;
        }
        nav .sub-menu li {
            white-space: nowrap;
            float: none;
        }
        li.menu-item-has-children:hover > .sub-menu {
            display: block;
        }
    </style>

</head>
<header>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="nav-wrapper">
            <div class="container">
                <a href="#" class="brand-logo">Logo</a>
                <a href="#" data-activates="mobile-nav" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
                <?php
                $menu = [ // mobile side menu array
                    'menu_class'     => 'menu side-nav',
                    'menu_id'        => 'mobile-nav',
                    'items_wrap'     => '<ul id="%1$s" class="%2$s"><li class="mobile-header"><p>Menu</p></li>%3$s</ul><div class="clear"></div>',
                ];
                wp_nav_menu( $menu ); // mobile side menu
                $menu = [ // desktop menu array
                    'menu_class' => 'right hide-on-med-and-down'
                ];
                wp_nav_menu( $menu ); // desktop menu
                ?>
            </div>

        </div>
    </nav><!-- #site-navigation -->
    <div class="clear"></div>
</header>

<br>
<br>

<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/js/materialize.min.js"></script>
<script>
    $(document).ready(function () {
        $(".button-collapse").sideNav();
    });
</script>
</body>
</html>

Materialize CSS Wordpress Sub Menu

【讨论】：