我得到了下面的html
<aside class="SideNavLayoutWrapper">
<div class="OverFlowWrapper">
<div class="MenuWrapper">
<a class="SideNavMenuItem">Link 1</a>
<a class="SideNavMenuItem active">Link 2</a>
<a class="SideNavMenuItem">Link 3</a>
<a class="SideNavMenuItem">Link 4</a>
<a class="SideNavMenuItem">Link 5</a>
<a class="SideNavMenuItem">Link 6</a>
<a class="SideNavMenuItem">Link 7</a>
<a class="SideNavMenuItem">Link 8</a>
<a class="SideNavMenuItem">Link 9</a>
</div>
</div>
</aside>
字符串
这是一个侧面导航
和下面的css一起去上面的html
body,
html {
margin: 0;
padding: 0;
}
.SideNavLayoutWrapper {
will-change: transform;
width: 260px;
height: calc(100% - 60px);
position: fixed;
top: 60px;
display: flex;
flex-direction: column;
z-index: 6;
background-color: #384143;
transform: translate3d(0px, 0px, 0px);
transition: all 300ms linear;
}
.OverFlowWrapper {
box-sizing: border-box;
color: #fff;
height: 100%;
overflow-y: auto;
width: 100%;
padding: 0 0 10px 0;
z-index: unset;
display: block;
position: static;
background: transparent;
}
.MenuWrapper {
transform: translate3d(0px, 0px, 0px);
transition: transform linear 300ms;
}
.SideNavMenuItem {
display: block;
position: relative;
min-height: 20px;
min-width: 20px;
border-bottom: solid 1px rgba(255, 255, 255, 0.2);
transition: color 0.3s cubic-bezier(0, 0, 0.08, 1), background-color 0.3s cubic-bezier(0, 0, 0.08, 1);
color: #FFFFFF;
cursor: pointer;
padding: 18px 18px 18px 0;
}
.SideNavMenuItem.active {
color: #ee4900;
}
.SideNavMenuItem.active::before {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent #384143;
z-index: 99;
}
型
我的问题是,当一个SideNavMenuItem
有一个active
类来指示它是一个活动链接时,我希望在链接的右边有一个插入符号。
然而,虽然是的,它确实转到了链接的右侧,但由于.OverflowWrapper
中的overflow-y: auto;
,它对用户隐藏了。overflow-y: auto;
在那里,所以用户可以垂直滚动,但它也水平滚动现在作为插入符号添加在.SideNavMenuItem.active::before
扩展链接的宽度,但我希望插入符号坐在外面的一边,它只有当.OverflowWrapper
中的overflow-y: auto;
被删除,但当我删除overflow-y: auto;
然后用户不能垂直滚动。
有没有一种方法,我可以有插入符号标记对齐的活动链接的权利,并出现在外面的右边的一边,但也允许用户垂直滚动的一边?
这是否只能通过将插入符号移动到.SideNavLayoutWrapper
元素之外并使用JavaScript将插入符号定位在正确的位置来实现?不过,这样一来,我需要处理当用户滚动时会发生什么,以及当用户滚动时链接不再可见时会发生什么?
任何帮助将不胜感激。
1条答案
按热度按时间km0tfn4u1#
在
.SideNavLayoutWrapper
上设置width:280px
并清除其背景;在.MenuWrapper
上设置width: 260px
,并在此处输入背景色。这将使插入符号出现。唯一的问题是滚动条会出现在插入符号的右边,但是其他的解决方案需要JavaScript。