Question

我正在尝试用物化框架制作WordPress主题，但我真的很困惑的是navbar部分。我在互联网上搜索但没有发现任何东西，似乎没有人能够实现。

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

Answer 1

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

可以在此处找到代码段和说明： https://github.com/kristofferandreasen/wp_materialize_navigation

它基于评论中链接的网站。

Answer 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/）

Answer 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

Nav Walker实现css

3 个答案: