Toggle Sidebar

ERMAHGERD STAHP

This is a template page used internally by the Wiki.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION

This is a component to make the mobile sidebar button active on desktop-size screen.
To use, put the following:

[[include :scp-int:component:toggle-sidebar]]

If used with a theme, it's recommended to put said theme after this [[include]].

(Use this version by Woedenaz Woedenaz if you're using Black Highlighter)

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1*/
 
#top-bar.open-menua{position:fixed;
 top:0.5em;
 left:0.5em;
 z-index:5;
 font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
 font-size:30px;
 font-weight:700;
 width:30px;
 height:30px;
 line-height:0.9em;
 text-align:center;
 border:0.2emsolid#888;
 background-color:#fff;
 border-radius:3em;
 color:#888;
 pointer-events:auto;
}@medianotalland (max-width: 767px) {#top-bar.mobile-top-bar{display:block;
 pointer-events:none;
 }#top-bar.mobile-top-barli{display:none;
 }#main-content{max-width:44.5rem;
 margin:0auto;
 padding:0;
 transition: max-width 0.2s ease-in-out;
 }#side-bar{display:block;
 position:fixed;
 top:0;
 left: -18rem;
 width:15.25rem;
 height:100%;
 margin:0;
 overflow-x:hidden;
 overflow-y:auto;
 z-index:10;
 padding:1em1em01em;
 background-color: rgba(0,0,0,0.1);
 transition:left0.4s ease-in-out;
 
 scrollbar-width:thin;
 }#side-bar:target{left:0;
 }#side-bar:focus-within{left:0;
 }#side-bar:target.close-menu{display:block;
 position:fixed;
 width:100%;
 height:100%;
 top:0;
 left:0;
 margin-left:17rem;
 opacity:0;
 z-index: -1;
 visibility:visible;
 }#side-bar:not(:target) .close-menu{display:none; }#top-bar.open-menua:hover {
 text-decoration: none;
 }
}

component

page revision: 1, last edited: 23 Feb 2025 08:33

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License

Click here to edit contents of this page.

Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.

Append content without editing the whole page source.

Check out how this page has evolved in the past.

If you want to discuss contents of this page - this is the easiest way to do it.

View and manage file attachments for this page.

A few useful tools to manage this Site.

See pages that link to and include this page.

Change the name (also URL address, possibly the category) of the page.

View wiki source for this page without editing.

View/set parent page (used for creating breadcrumbs and structured layout).

Notify administrators if there is objectionable content in this page.

Something does not work as expected? Find out what you can do.

General Wikidot.com documentation and help section.

Wikidot.com Terms of Service - what you can, what you should not etc.

Wikidot.com Privacy Policy.

SCP International

Wiki & Translation Archive