トグル式サイドバー
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
このコンポーネントは、デスクトップサイズの画面でもモバイルサイドバーを有効化するためのものです。
次のコードを使用してください:
[[include :scp-jp:component:toggle-sidebar]]
あなたがカスタムテーマを使用しているなら、この[[include]]の後にテーマを配置することをおすすめします。
(Black Highlighterテーマを使用しているなら、WoedenazによるBHLバージョンを使用してください)
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */ #top-bar .open-menu a { position: fixed; bottom: 0.5em; left: 0.5em; z-index: 15; font-family: san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888 !important; background-color: #fff !important; border-radius: 3em; color: #888 !important; text-decoration: none!important; } @media (min-width: 768px) { .mobile-top-bar { display: block; } .mobile-top-bar li { display: none; } #main-content { max-width: 708px; margin: 0 auto; padding: 0; transition: max-width 0.2s ease-in-out; } #side-bar { display: block; position: fixed; top: 0; left: -25em; width: 17em; height: 100%; background-color: rgb(184, 134, 134); overflow-y: auto; z-index: 10; padding: 1em 1em 0 1em; -webkit-transition: left 0.5s ease-in-out 0.1s; -moz-transition: left 0.5s ease-in-out 0.1s; -ms-transition: left 0.5s ease-in-out 0.1s; -o-transition: left 0.5s ease-in-out 0.1s; transition: left 0.5s ease-in-out 0.1s; } #side-bar:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.2); } #side-bar:target { display: block; left: 0; width: 17em; margin: 0; border: 1px solid #dedede; z-index: 10; } #side-bar:target + #main-content { left: 0; } #side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.3) 1px 1px repeat; z-index: -1; } }
ページリビジョン: 6, 最終更新: 30 Apr 2021 04:45