我正在使用post
和Angular 7
建立一个网站。
网页的布局在顶部具有固定的标题,在左侧具有侧栏导航菜单。
我的预期行为是,在侧边栏切换时,它不会隐藏标题,内容也会向右移动。
我已经检查了primeng文档,但是没有提供此类功能。 https://www.primefaces.org/primeng/#/sidebar
答案 0 :(得分:1)
它只是css和html,例如,当我将CSS悬停在容器上时,我使用普通的CSS来展开边栏,您可以使用JS处理click事件以展开它:
nav{
height:70px;
background-color: green;
}
.container{
display: flex;
}
.container .main-body{
width: 100%;
}
.container aside{
width: 0;
height: calc(100vh - 70px);
overflow-y: auto;
transition: all 0.5s;
background-color: yellow;
}
/*Im using hover on body for example, you can use JS to handle click event, */
.container:hover aside{
width: 200px;
}
<nav></nav>
<section class="container">
<aside></aside>
<div class="main-body">Hover me to display side bar</div>
</section>