我有一个汉堡侧边菜单和标题元素,当我单击该汉堡菜单时,我希望标题显示为初始状态,并且标题的宽度向左缓慢增长,我该怎么做。
header {
width: 0px;
background-color: black;
padding-bottom: 10px;
display: none;
position: absolute;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header>.</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
最佳答案
您可以使用 css transition当 header
宽度从 0 到 100%
document.getElementById('main').onclick = function() {
document.getElementById('header').classList.add('show');
}
html,
body {
padding: 0;
margin: 0;
}
header {
width: 0px;
background-color: black;
position: absolute;
transition: all 0.5s;
overflow: hidden;
}
header.show {
width: 100%;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header id="header">
<div style="padding: 1em;">
header
</div>
</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
关于javascript - 如何使标题元素的宽度向左缓慢移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58252969/