닫기 'X'아이콘으로 구체화 실현

Question

나는 화면 너비의 100 %를 커버하기 위해 사이드 배너의 스타일을 지정했으며 탐색을 종료하려면 표준 'X'아이콘을 오른쪽 상단 구석에 추가해야합니다. 또한 워드 프레스 테마이기도합니다. 제안?

<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

클릭에 가까운이 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(); 
     }); 
    } 

때 탐색에있는 링크 클릭합니다. 이 배열합니다 (sidenav에 관한 위의 코드에서 두 번째로

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

: 나는 시도했다

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

때문에 실패되었습니다이를 바탕으로 내가이 링크를 추가해야 할 것 같습니다 . 지금까지

Answer 1

의 :

<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 기능을 사용할 수 있습니다

이 좋아, 많은 시행, 오류 여기 조사 후 답변을