CSS HTML Javascript

クリックしたらメニューを表示する

クリックしたらメニューが表示されるようにクラスを操作していきます。

  • clickイベントの作成
  • showクラスの作成
  • hideクラスの作成

clickイベントの作成

・では前回の続きです。前回まででmain.jsを作成し、idやクラスの取得までやってきました。

 

・今回はクリックをしたら取得した要素を表示するようにしていきたいと思います。

・早速はクリックイベントを完成させていきましょう。前回まででメニューアイコンをクリックしたら次の処理をするというコードを書いていったので今回はその中身ですね。

・まずは定数のoverlayを表示してあげます。そのうえで足りないスタイリングがあるのでclassList.add()を使ってスタイリングを追加していきます。とりあえず追加するclassの名前はshowとしてあげましょう。

・クリックしたらこちらが追加される感じです。

overlay.classList.add('show');

showクラスの作成

・CSSでshowを作成していきます。overlayのママだと透明のままでなおかつカーソルの反応がなくなっている状態なのでそのへんをクリアしていきます。

・セレクタは.overlay.showとしてあげます。

・内容は透明度を1にしたいのでopacity: 1;とポインター無効を解除したいので既定値のautoにすればいいですね。

・こんな感じです。

.overlay.show {

  opacity: 1;

  pointer-events: auto;

}

hideクラスの作成

・更にクリックしたらばつ印の裏に透明なメニューアイコンがついたままで被って少し見にくいのでこれも同様の方法で消していきましょう。

・まずJavaScriptでopenに対してクラスリストを追加して今度はhideと名前をつけていきましょう。

・クリックイベントと合わせるとこんな感じです。

  open.addEventListener('click', () => {

    overlay.classList.add('show');

    open.classList.add('hide');

  });

・そしてCSSでhideを作っていきましょう。

・セレクタは.sp-menu #open.hideとしてあげて中身はdisplay: none;でいいでしょう。

・こんな感じですね。

.sp-menu #open.hide {

  display: none;

}

-CSS, HTML, Javascript