閉じる 'X'アイコンを使用してsidenavを閉じる

Question

私は画面幅の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> 

EDIT：だからここsidenavをクローズ機能ですonclickの

クリックに近いがsidenavが閉じる（分上のように）trueに設定されている基本的には場合

// 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(); 
     }); 
    } 

ときナビゲーションで任意のリンクをクリックします。これに基づき、私がこのリンクを追加する必要がありそうです：

<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

[OK]を、多くの裁判の後、エラーと研究がここに答えます：？

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

たぶん、あなたはjQueryのfadeOut機能を使用することができます