How to add hidden sidebar to websites

2020-06-07 12:59:29 | Web Design | 1k+ Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/329

On blogger, I found a great solution:

@media screen and (max-width: 1439px)
.sidebar-container.sidebar-invisible {
    -webkit-transition-timing-function: cubic-bezier(.4,0,.6,1);
    transition-timing-function: cubic-bezier(.4,0,.6,1);
    -webkit-transform: translateX(-284px);
    -ms-transform: translateX(-284px);
    transform: translateX(-284px);
}

This is what I see when I press F12 in chrome.

This CSS code may help you find out how to design a hidden sidebar.

This will be very useful for improving your mobile user experience.

I will add the specific description of this CSS code later.

This article was last edited at 2020-06-07 13:01:06