目前,我正在尝试为应用程序的导航条做一种下拉菜单,仅限于CSS。
多亏了复选框,当选中、扩展和未选中时,我的导航条就会用动画隐藏自己,当用户单击导航栏上的任何位置时,它会隐藏或扩展自己。我导航栏中的所有锚都链接到ids。
我的问题是,当我单击任何链接时,复选框不会取消选中,因此导航条不会执行“撤回”动画。
下面是在html中的导航栏(Jade):
header
input(type='checkbox')#btn
label(for='btn')#menu
nav
ul
我在页面上的几个元素上分配了宽度和高度的转换,包括顶部导航栏和<main>元素。当用户调整页面大小时,元素会动态改变其宽度/高度等。
除了导航到新页面之外,这种方法工作得很好。当页面加载时,元素从其指定的最大宽度动画到其标准宽度。这不是从max-width到width的动画,而是类似于以下内容:
nav {
height: 25px;
transition: all 0.2s ease-in-out;
}
@media all and (max-height: 200px) {
nav {
height: 50px;
}
}
在这个真