【初心者でもわかる】ゆっくり[ ✕ ]にかわるハンバーガーメニュー - Qiita

.menu { width: 20px; /* メニューの横幅 */ height: 16px; /* メニューの高さ */ position: relative; /* 基準値とする */ } /* 3本線共通のCSS */ .menu span, .menu::before, .menu::after { width: 100%; /* 横幅いっぱいに指定 */ height: 2px; /* 3本線の高さを2pxに指定 */ display: inline-block; /* インラインブロック要素にする */ background: #CCC; /* 線の色をグレーにする */ position: absolute; /* 相対位置にする */ left: 0; /* 左からは0pxの位置 */ transition: .5s; /* 動きを0.5秒かけて動かす */ } /* 真