目標
なるべく無駄な記述を減らし、シンプルにしてみました。
開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina
前提
※ ▶◯◯ を選択すると、説明等が出てきますので、
よくわからない場合の参考にしていただければと思います。
実際のコード（左から、ベース）
まずは目標の左から出てくるようにします。
html
<nav id="nav">
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</nav>
<div id="hamburger">
<span class="inner_line" id="line1"></span>
<span class="inner_line" id="line2"></span>
<span class="inner_line" id="line3"></span>
</div>
<style>
body{
background-color: rgba(0,0,0,0.2);
}
#nav{
position: absolute;
height: 100vh;
width: 40%;
left: -40%;
top: 0;
background: #ffffff;
transition: .7s;
}
#nav ul{
padding-top: 80px;
}
#nav ul li{
list-style-type: none;
}
#hamburger {
display: none;
position: absolute;
top: 20px;
left: 30px;
width: 50px;
height: 44px;
transition: 1s;
}
.inner_line {
display: block;
position: absolute;
left: 0;
width: 50px;
height: 3px;
background-color: #000000;
transition: 1s;
border-radius: 4px;
}
#line1 {
top: 0;
}
#line2 {
top: 20px;
}
#line3 {
bottom: 0px;
}
.in{
transform: translateX(100%);
}
.line_1,.line_2,.line_3{
background: #000000;
}
.line_1 {
transform: translateY(20px) rotate(-45deg);
top: 0;
}
.line_2 {
opacity: 0;
}
.line_3 {
transform: translateY(-20px) rotate(45deg);
bottom: 0;
}
@media (max-width: 1200px) {
#hamburger {
display: block;
}
}
</style>
<script>
function hamburger(){
document.getElementById('line1').classList.toggle('line_1');
document.getElementById('line2').classList.toggle('line_2');
document.getElementById('line3').classList.toggle('line_3');
document.getElementById('nav').classList.toggle('in');
};
document.getElementById('hamburger').addEventListener('click',function(){
hamburger();
});
</script>
補足【@media (max-width: 1200px)】
レスポンシブ対応をさせる場合は
<meta name="viewport" content="width=device-width,initial-scale=1.0">
この記述を<head></head>内部に記述してください
実際のコード（上から）
cssのみ編集します。
※ベースからの変更箇所のみ
#nav{
position: absolute;
height: 300px;
width: 40%;
left: 0; /* 変更 */
top: -300px; /* 変更 */
background: #ffffff;
transition: .7s;
}
.in{
transform: translateY(100%); /* 変更 */
}
実際のコード（右から）
cssのみ編集します。
※ベースからの変更箇所のみ
#nav{
position: absolute;
height: 300px;
width: 40%;
right: -40%; /* 変更 */
top: 0;
background: #ffffff;
transition: .7s;
}
#hamburger {
display: none;
position: absolute;
top: 20px;
right: 30px; /* 変更 */
width: 50px;
height: 44px;
transition: 1s;
}
.in{
transform: translateX(-100%); /* 変更 */
}
まとめ
考え方としては、メニューの一覧を画面外に表示させておき、
クリックすると表れる仕組みです。
●css
ハンバーガーメニューの横線はinner_lineで、
クリックしたときの挙動はtransform: translate〜;で表現しています。
●javascript
クリックした時に付与するクラスを指定し、新しいcssを適用させています。
ハンバーガーメニューに関しては様々な方法があるため、興味のある方は調べてみると面白いです。
またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら https://twitter.com/japwork