Question
Left Navigation Panel Design
I want to implement iconic and collapsed navigation panel like the mypega portal shown below.
On load it shows the navigation panel as icons and hover over brings up the full menu. This will help manage the real estate of the UI.
Can anyone help as to how to achieve this?
***Moderator Edit-Vidyaranjan: Updated Platform Capability***
Hi Deepthi,
Please use below styles to make left navigation responsive , Just like myPega.
<style>
@media screen and (max-width: 9999px){
.collapse-nav-auto > #sidebar-region-one {
width: 51px;
}
.collapse-nav-auto > #sidebar-region-one:hover {
width: 350px;
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4);
}
}
.collapse-nav-auto > #sidebar-region-one {
-webkit-transition-duration: .17s;
-webkit-transition-timing-function: cubic-bezier(.2,.6,.36,1);
-webkit-transition-delay: .14s;
-webkit-transition-property: width, box-shadow;
transition-duration: .17s;
transition-timing-function: cubic-bezier(.2,.6,.36,1);
transition-delay: .14s;
transition-property: width, box-shadow;
z-index: 1;
position: absolute;
}
</style>
