YouTubeっぽいサイドバーを実装する【CSS】【JavaScript】
6860 ワード
したいこと
- 開閉可能なサイドバー
- メインのコンテナーはサイドバーにぶつかるまで画面(ブラウザー)に対して左右中央
コード
HTML
<body>
<aside class="sidebar">いろいろ</div>
<div class="container">いろいろ</div>
</body>
SCSS
$container-width: 1140px;
$sidebar-width-open: 250px;
$sidebar-width-close: 50px;
$main-margin: 10px;
.sidebar {
height: 100%;
position: fixed;
top: 0;
left: 0;
&.m-open {
width: $sidebar-width-open;
}
&.m-close {
width: $sidebar-width-close;
}
}
.container {
&.m-open {
width: $container-width + 2*$main-margin;
margin: 0 auto;
@media (max-width: $container-width+2*$sidebar-width-open+2*$main-margin) {
width: 100%;
padding-left: $sidebar-width-open + $main-margin;
}
}
&.m-close {
width: $container-width + 2*$main-margin;
margin: 0 auto;
@media (max-width: $container-width+2*$sidebar-width-close+2*$main-margin) {
width: 100%;
padding-left: $sidebar-width-close + $main-margin;
}
}
}
要はサイドバーを浮かせて、コンテナーの左にサイドバーの幅分paddingを追加してる
JavaScript
let layouts = [$('.sidebar'), $('.container')];
$('#menu-button').on('click', () => {
layouts.forEach(layout => {
layout.toggleClass('m-open');
layout.toggleClass('m-close');
});
});
#menu-buttonをクリックしてサイドバーの幅の大きさを切り替え
Author And Source
この問題について(YouTubeっぽいサイドバーを実装する【CSS】【JavaScript】), 我々は、より多くの情報をここで見つけました https://qiita.com/NoSuke23/items/030e6f22db4e1a3834f9著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .