我有一个导航栏,现在想让切换按钮起作用。我的切换按钮是一个复选框,所以以下是css来使导航栏(#navbar-left
)在点击复选框时出现:
#navbar-left{
max-width: 0;
min-width: 0;
width: 0;
transition: max-width 0.2s ease;
transition: min-width 0.2s ease;
}
.nav-trigger:checked ~ #navbar-left {
max-width: 200%;
min-width: 20%;
width: auto;
float: left;
}
在这里,.nav-trigger
是一个勾选按钮。我已经能够通过应用 min-width 或 max-width 来平滑地关闭或打开导航栏,但是如何同时使用它们来平滑地打开和关闭导航栏?
我不能简单地使用 width
属性来应用过渡效果,因为我必须将 width
属性始终设置为自动。
有没有最佳解决方案或任何其他方法来实现这一点?