我已经设计了我的侧导航以覆盖 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>
编辑:所以这是关闭侧边导航的函数
// 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(如分钟),则当单击导航中的任何链接时,侧导航将关闭。基于此,我似乎需要添加此链接:
<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')); ?>
我已经尝试过,但到目前为止都没有成功。
只需使用类侧导航关闭将项目添加到菜单中
即可例:
<li>
<a href="#!" class="sidenav-close">Close </a>
</li>
也许你可以使用jQuery fadeOut
函数?
好的,经过大量的试验、错误和研究,这就是答案:
<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>
在函数中.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;
}
只是在开发金属盒答案
<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
}