JavaScriptのアプリ実装パターン~回転するメニューバー~

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、メニューバーをJavaScriptで回転させる方法について学びましょう。とは言っても半分以上はCSSの機能になってしまいますけど^^;

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

開発

ページの作成

最初にページの作成をしましょう。index.htmlに次のコードを記述してください。

このHTMLをブラウザ上で表示すると以下のようになります。

画像がオーバーレイしているので見えないのですが、ナビゲーションバーには、Font Awesomeのアイコンを利用しています。

スタイルの追加

次にスタイルをstyle.cssに記述してきましょう。

ここまで実装すると以下のようになります。

CSSは難しいですね^^;筆者は苦手です。

JavaScriptの実装

さて、いよいよJavaScriptを実装しましょう。

styleに設定した「.show-nav」クラスを「containerクラスがついている要素」に付与するとメニューバーが回転します。

要素を取得する

JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。

containerだけquerySelectorを使っています。このメソッドで取得できるclassListプロパティを後々使いたいからです。

クリックイベントの登録

次にopen/closeボタンのクリックイベントの登録を行います。

これでOKです。簡単ですね。

前述の通り、show-navクラスをcontainerクラスがついている要素に付与することで、メニューバーを回転させることができます。

addEventListenerにて、「ユーザーのクリックイベント」が登録できるので、この機能を利用してオープン/クローズ処理を実装しました。

そして、querySelectorで取得した要素にはclassListプロパティが存在し、それが持っているadd/removeメソッドにてshow-navクラスの付け替えを行なっています。

おわりに

今回は、JavaScriptは全然難しくありませんでしたね。CSSはめっちゃ難しいですが。。

JavaScriptまとめ

JavaScript ソースコード

コメントを残す