・開閉機能付きサイドバーのサンプル
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<style>
.sidebar {
position: fixed;
display: flex;
justify-content: flex-end;
width: 300px;
height: 50vh;
left: 0;
background-color: lightgray;
}
.sidebar.onoff {
left: -260px;
}
.main {
position: fixed;
width: 600px;
height: 50vh;
left: 300px;
background-color: bisque;
}
.main.onoff {
left: 40px;
width: calc(600px + 260px);
}
</style>
</head>
<body>
<aside class="sidebar">
<a href="#">
<i class="menu material-icons-outlined">menu</i>
</a>
</aside>
<main class="main">メインパネル</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.menu').on('click', function () {
$('.sidebar').toggleClass('onoff');
$('.main').toggleClass('onoff');
});
</script>
</body>
</html>
コメント