我想要一个侧边栏,其中的项目悬停时会显示子项目。 我遇到了溢出和绝对位置的问题,请帮助我。谢谢! 这个视频的详细内容: https://youtu.be/4D3hNu2JBvU
这是代码:
https://play.tailwindcss.com/Go8GAXt5AP
https://jsfiddle.net/coder039/qaz4dp9o/18/
overflow-y: auto;
谢谢!
嗨!我想要一个带有项目的侧边栏,当悬停时,它会显示子项目。 我遇到了溢出和绝对位置的问题,请帮助我。谢谢!
overflow-y
由于位置 left
使用 top
代替,我应用了最好的情况来在悬停时显示侧边栏。
*,
*::before,
*::after {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
.parent {
display: grid;
height: 100vh;
grid-template-columns: 150px 1fr;
}
.sidebar {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
}
.content {
border: 1px solid #ddd;
}
.item {
margin-bottom: 8px;
display: flex;
width: 100%;
height: 50px;
flex-shrink: 0;
justify-content: center;
align-items: center;
background: rgb(253, 230, 138);
}
.item.item-with-subitems {
position: relative;
}
.item.item-with-subitems > span{
cursor:pointer;
}
.subitems-container {;
position: absolute;
top: 50%;
width: 100px;
background: #ff0000;
opacity: 0;
display:none;
transform:scale(0.99) translateY(-0.7em);
transform-origin:top;
transition-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
transition-duration:500ms;
transition-property:opacity,transform;
list-style: none;
padding: .5rem;
}
.item.item-with-subitems:hover > .subitems-container {
opacity: 1;
transform: scale(1) translateY(0);
display:block;
}
<div class="parent">
<div class="sidebar">
<div class="item">home</div>
<div class="item item-with-subitems">
<span>code</span>
<ul class="subitems-container">
<li><a href="#">javascript</a></li>
<li><a href="#">scheme</a></li>
<li><a href="#">clojure</a></li>
<li><a href="#">golang</a></li>
</ul>
</div>
<div class="item">news</div>
<div class="item">c</div>
<div class="item item-with-subitems">
<span>sport</span>
<ul class="subitems-container">
<li><a href="#">soccer</a></li>
<li><a href="#">badminton</a></li>
<li><a href="#">swimming</a></li>
</ul>
</div>
<div class="item">c</div>
<div class="item">c</div>
<div class="item">c</div>
<div class="item">c</div>
<div class="item">c</div>
<div class="item">c</div>
<div class="item">c</div>
</div>
<div class="content">content</div>
</div>