以前はclickイベントで.showなどのクラスを付けて実装することが多かったToggleMenuですが、
最近ではJavascriptを使わずに、CheckboxとCSS3の合わせ技で作るのが一般的ですね。
わたしも最近この手法がメインなので、CodePen作ってみました。
See the Pen animation css3 checkbox menu by delico (@delico) on CodePen.dark
もくじ
解説
このメニューは、3つの要素で出来ています。
input | チェックボックス | display:none;にしておきます |
label | for属性でinputを操作します。ボタンに使います。 | ボタンのスタイルを自由に付けましょう |
nav | 展開するメニューです | 展開した状態をスタイリングし、あとで隠します。 |
input[type=checkbox]を配置し、見えなくします
labelで操作しますので、idを付けておきましょう。
<input type="checkbox" id="show">
checkboxは使いますが、視覚上は見えてなくていいので、隠します。
input[type="checkbox"] { display: none;}
checkboxを動かすlabelを追加します
for属性の中には、先ほどのcheckboxのidを。これでこのlabelで#showのついたinputが操作できるようになりました。
html
<label for="show">MENU</label>
そのままlabelをボタンとして使ってしまうのでスタイリングします。
css(SCSS)
// MENU BUTTON label { cursor: pointer; font-size: 0.8rem; border: 1px #000 solid; display: inline-block; height: 50px; width: 50px; line-height: 50px; text-align: center; z-index: 9999; position: absolute; top: 25px; right: 25px; &:hover { background: #efefef; } }