トグル式サイドバー
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
詳しくはカテゴリ運用ポリシーを参照してください。
このコンポーネントは、デスクトップサイズの画面でもモバイルサイドバーを有効化するためのものです。
次のコードを使用してください:
[[include :scp-jp:component:toggle-sidebar]]
あなたがカスタムテーマを使用しているなら、この[[include]]の後にテーマを配置することをおすすめします。
(Black Highlighterテーマを使用しているなら、Woedenaz Woedenaz によるBHLバージョンを使用してください)
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1*/ #top-bar.open-menua{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.2emsolid#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-barli{display:none; }#main-content{max-width:708px; margin:0auto; 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:1em1em01em; -webkit-transition:left0.5s ease-in-out 0.1s; -moz-transition:left0.5s ease-in-out 0.1s; -ms-transition:left0.5s ease-in-out 0.1s; -o-transition:left0.5s ease-in-out 0.1s; transition:left0.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:1pxsolid#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) 1px1pxrepeat; z-index: -1; }}
ページリビジョン: 6, 最終更新: 30 Apr 2021 04:45