メニュー(スマホ)のサンプル

See the Pen スマホ用メニュー by tetra-mix (@tetra-mix) on CodePen.

解説

基本的にパソコンで使用するメニューは上のようなコードで作れます。 このコードは少し複雑ですが一つ一つ見ていくと簡単です。

基本的にはボタンの中にメニューPC用のサンプルが入っている感じです。

一つ目の重要な処理として「ボタンの上にマウスがあると表示する」があります。 これはcssのコードの".smartphone:hover .tag{}"で実装しています。 ":hober"は後ろにクラスなどを書くことで後ろのクラスに対してスタイルを反映させることができます。 ただこれは少しややこしいのでやりながら慣れていってください。

二つ目の重要ポイントとしては「非表示」です。"display: none;"を書くことで非表示にできます。 表示するようにしたいときは"display: inline;"や"display: inline-block";などを使って上書きしてください。 これもよく使うので頭の片隅に置いておいてください。

三つ目のポイントは重なりです。もう一つ重要なポイントとしてpositonの使い方がありますが、 それは「メニューを作りたい3(ホバー)」で紹介します。"position"を使うと 重なりの関係がうまくいかないときがあります。そんな時に使うのが"z-index"です。 "z-index: 任意の数字;"ではこの数が多い方が上にくるように設定されます。