使用 'X' 图标关闭 materialize sidenav

Question

我将 sidenav 的样式设置为覆盖 100% 的屏幕宽度，并且需要在右上角添加一个标准 'X' 图标以关闭导航。它也是一个 wordpress 主题，所以也有。建议？

<nav class="transparent z-depth-0">
  <div class="nav-wrapper">
    <a href="<?php echo get_option('home'); ?>" class="brand-logo center-align"></a>

    <a href="#" data-activates="mobile-demo" class="right button-collapse" style="color: white;"><i class="material-icons">menu</i></a>

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


    <?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'side-nav', menu_id => 'mobile-demo')); ?>


  </div>

</nav>

编辑：这是关闭 sidenav onclick 的函数

 // if closeOnClick, then add close event for all a tags in side sideNav
    if (options.closeOnClick === true) {
      menu_id.on("click.itemclick", "a:not(.collapsible-header)",      function(){
        removeMenu();
      });
    }

基本上，如果点击关闭设置为 true（最小值），sidenav 在点击导航中的任何 link 时关闭。基于此看来我需要添加此 link:

<a href="#"  class="right" style= "color: white;"><i class="material-icons">clear</i></a>

进入这个数组（上面代码中与 sidenav 相关的第二个：

<?php wp_nav_menu (array( 'theme_location'=>'primary', menu_class => 'side-nav', menu_id => 'mobile-demo')); ?>

我已经尝试过，但到目前为止都没有成功。

Answer 1

也许你可以使用 jQuery fadeOut 功能？

Answer 2

好的，经过多次试验、错误和研究，答案如下：

<nav class="transparent z-depth-0">
  <div class="nav-wrapper">
    <a href="<?php echo get_option('home'); ?>" class="brand-logo center- align"></a>

    <a href="#" data-activates="mobile-demo" class="right button-collapse" style="color: white;"><i class="material-icons">menu</i></a>

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


    <?php wp_nav_menu (array('theme_location' => 'primary', 'items_wrap' => my_nav_wrap(), )); ?>


  </div>

</nav>

并在 functions.php 中创建自定义 nav_wrap:

function my_nav_wrap() {
    $wrap  = '<ul class="side-nav" id="mobile-demo">';
    $wrap .= '<li>';
    $wrap .= '<a href="#"  class="right" style= "color: white;">';
    $wrap .= '<i class="material-icons">clear</i>';
    $wrap .= '</a>';
    $wrap .= '</li>';
    $wrap .= '<div class="clear"></div>';
    $wrap .= '%3$s';
    $wrap .= '</ul>';

  return $wrap;
}

Answer 3

只需使用 class sidenav-close

将项目添加到菜单

示例：

<li>
   <a href="#!" class="sidenav-close">Close </a>
</li>

Answer 4

正在开发 Metalbox Answer

<div>
   <a href="#!" class="sidenav-close"><i class="material-icons">close</i></a>
</div>

然后是 CSS

a.sidenav-close > i.material-icons {
    position: absolute;
    right:20px;
    top: 20px;
    color:black  
}

使用 'X' 图标关闭 materialize sidenav

Close materialize sidenav with 'X' Icon

javascript

css

php

wordpress

materialize