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

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

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

【问题讨论】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-05-03
      • 1970-01-01
      • 2017-08-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-25
      • 2023-04-09
      相关资源
      最近更新 更多