Better Sidebar/更好的侧边栏

By G2LighterG2Lighter

Description

A better sidebar, hover over the arrow in the bottom right corner of the page to show it.
更好的侧边栏,光标悬停/点击页面的右下角箭头时会自动展开。

Code

[[module CSS]]
div#side-bar span.printuser a:nth-child(1) {
    pointer-events: none;
}
div#side-bar::before {
    content: '';
    background-color: #eee;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='55%25' font-size='15' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E⇱%3C/text%3E%3C/svg%3E");
    background-size:cover;
    position: fixed;
    right: 5%;
    bottom: 5%;
    height: 5vh;
    width: 5vh;
    display:block;
    border-radius: 1rem 0 0;
    transition: .2s ease;
    box-shadow: #eee 5px 5px 13px;
    border: .1rem solid #ccc;
}

div#side-bar {
    height: 0%;
    max-height: 50%;
    border: unset;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 5%;
    right: 5%;
    transition: .2s ease;
}

div#side-bar:hover {
    height: max-content;
    width: max-content;
    scrollbar-width: none;
    margin: 0;
    padding: 1rem;
    overflow: scroll;
    position: fixed;
    bottom: 5%;
    right: 5%;
    background-color: #f8f8f8cc;
    border: 1px solid #ccc;
    border-radius: 1rem 0;
    box-shadow: #555 5px 5px 13px;
}
div#side-bar:hover::before {
    border-radius: 1rem 0;
    background-color: #3339;
    box-shadow: #555 5px 5px 13px;
}
[[/module]]

In action

link to the implemented solution on a Wikidot site or put a working example here


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by G2Lighter


Rate this solution

If you think this solution is useful — rate it up!

rating: +1+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License