關閉使用'X'圖標實現sidenav

我已經設計了我的sidenav以覆蓋屏幕寬度的100％，並且需要向右上角添加標準「X」圖標才能關閉導航。這也是wordpress主題，所以也是如此。建議？關閉使用'X'圖標實現sidenav

<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關閉時的資產淨值任何鏈接被點擊。在此基礎上，看來我需要添加此鏈接：

<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')); ?>

我試過，並已成功使。遠

來源

2016-07-15 Eli Jayson

好了，經過多次試驗，錯誤和這裏的研究就是答案：

<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; 
}

來源

2016-07-15 18:41:15

也許你可以使用jQuery fadeOut功能

來源

2016-07-15 09:33:23

關閉使用'X'圖標實現sidenav

回答

相關問題