MaterializeCSS 1.0如何自定义侧边导航栏宽度？

嘿，刚好升级过Materialize到1.0版本，碰到过和你一样的问题，给你分享下解决方案：

Materialize 1.0确实移除了旧版的menuWidth参数，转而推荐用CSS来控制侧边导航的宽度，这样更灵活也符合现代样式管理的思路。具体操作可以分这几步：

1. 给侧边导航添加自定义类 #

首先给你的侧边导航容器加个专属类（比如custom-sidenav），避免影响其他侧边栏组件：

<ul class="sidenav custom-sidenav" id="mobile-demo">
  <!-- 侧边栏内容 -->
</ul>

2. 用CSS自定义宽度 #

根据你的需求，写对应的CSS样式。比如你要在小屏幕下让侧边栏占满屏幕宽度：

/* 小屏幕下（max-width:992px是Materialize的断点） */
@media only screen and (max-width: 992px) {
  .custom-sidenav {
    width: 100% !important;
    /* 如果你需要固定宽度，比如300px，就改成width: 300px !important; */
  }
}

小贴士：如果不想用!important，可以用更具体的选择器提高优先级，比如nav .custom-sidenav，这样能更优雅地覆盖默认样式。

如果要设置所有屏幕下的固定宽度，直接写：

.custom-sidenav {
  width: 320px; /* 替换成你需要的宽度值 */
}

3. 调整关闭按钮的调用方法 #

旧版的.button-collapse在1.0里已经改成了.sidenav，所以关闭侧边栏的方法也要更新：

// 先初始化侧边导航
$(document).ready(function(){
  $('.sidenav').sidenav();
});

// 关闭按钮的点击事件
$('.close-btn').click(function(){
  $('.sidenav').sidenav('close');
});

这样就能完美实现你之前的需求啦，CSS控制宽度比旧版的JS参数更灵活，还能轻松实现响应式调整~

内容的提问来源于stack exchange，提问作者omarmallat