[英]How to add scrolling to fixed left bar with side drop down menu
我希望有一个固定的左栏菜单,但如果屏幕高度变短,则允许它滚动。
这是我到目前为止所拥有的小提琴。 我知道这是导致下拉菜单不显示的overflow
css,但不确定如何修复。 我是后端开发人员,而不是前端:)
添加此项允许左侧菜单滚动,但下拉菜单不显示:
overflow-y: auto;
overflow-x: hidden;
将其注释掉后,下拉菜单会按我的意愿显示,但左侧菜单不会垂直滚动。
我的代码供参考,但请参阅上面的小提琴以获取工作示例。
Html:
<nav class="cd-side-nav js-cd-side-nav noPrint" style="">
<ul class="cd-side__list js-cd-side__list" id="menu">
<li class="cd-side__item cd-side__item--has-children">
<a href="#">Menu 1</a>
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
<a href="#">Menu 2</a>
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
<a href="#">Menu etc...</a>
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
<a href="#">Menu etc...</a>
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item cd-side__item--has-children">
<a href="#">Menu etc...</a>
<ul class="cd-side__sub-list">
<li class="cd-side__sub-item">Sub-Menu-1</li>
<li class="cd-side__sub-item">Sub-Menu-2</li>
<li class="cd-side__sub-item">Sub-Menu-3</li>
<li class="cd-side__sub-item">Sub-Menu-4</li>
</ul>
</li>
<li class="cd-side__item">
<a href="#">Menu etc...</a>
</li>
<li class="cd-side__item">
<a href="#">Menu etc...</a>
</li>
<li class="cd-side__item">
<a href="#">Menu etc...</a>
</li>
<li class="cd-side__item">
<a href="#">Menu etc...</a>
</li>
<li class="cd-side__item">
<a href="#">Menu etc...</a>
</li>
</ul>
</nav>
CSS:
.cd-side-nav {
top: 0;
left: 0;
height: 100vh;
position: fixed;
width: 200px;
/* with this commented out - drop down menu displays ok - but left menu doesn't scroll*/
/*
overflow-y: auto;
overflow-x: hidden;
*/
}
.cd-side__item {
height:75px;
border: 1px solid grey;
}
.cd-side__sub-list, .cd-nav__sub-list {
background-color: grey;
display: none;
}
.cd-side__item--has-children:not(.cd-side__item--selected).hover .cd-side__sub-list {
display: block;
position: relative;
z-index: 1;
left: 200px;
top: -20px;
width: 200px;
}
和 JS 应用hover
class 悬停在菜单项上:
$(document).ready(function() {
$(".cd-side__item--has-children").on({
mouseenter: function () {
$(this).addClass("hover");
},
mouseleave: function () {
$(this).removeClass("hover");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.