CSSとJavaScriptを使用してドロップダウンメニューを作成する方法

このチュートリアルでは、バニラJavascript、HTML、およびCSSを使用して簡単なドロップダウンメニューを作成する方法を学習します。HTML、CSS、およびJavascriptコードについて説明しますが、これはJSチュートリアルであるため、プログラミングにさらに注意を払っています。フレームワークやプリプロセッサを使用せずに、プレーンなJSとCSSのみを使用します。唯一の(種類の)例外は、Font Awesome CSSファイルのインポートです。これは、そのアイコンの1つを使用するためです。

これは、HTML、CSS、およびJSを平均的に理解している開発者を対象としています。できるだけきれいにしようとしましたが、ここでは細部にあまり焦点を当てません。皆さんも楽しんでいただければ幸いです。

スクリーンショット

コード結果は次のようになります。

初期画面:

ドロップダウンが開きました:

オプションが選択されたドロップダウン:

HTML:

このセクションでは、デモページのHTMLコードの実装について説明します。まず、コードを見てみましょう

      Dropdown Example   

これは基本的にHTMLヘッドの定型文ですが、linkこのチュートリアルで使用する2つのCSSスタイルシート(Font Awesomeスタイルとstyles.cssこのページのスタイルを定義するファイル)をロードするタグを除きます。

次に、残りのHTMLファイルである本文があります。

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...   

このセクションは、3つの主要な部分に分けることができます。

  • .dropdownドロップダウン要素の構造が定義されるのdiv、。
  • #resultドロップダウンリストの要素から、ユーザーが選択したオプションが含まれます要素。
  • タグに書き込まれたスクリプト。その詳細はこのチュートリアルの最後のセクションで説明されるため、その実装はここでは非表示になっています。

ドロップダウン要素はdivtitleおよびmenu要素を含むものです。前者は、オプションが選択される前に要素に表示されるテキストを定義するだけであり、後者は、要素によって選択可能なオプションを定義します。

このresult要素は、現在選択されているオプションを示すためだけにあります。

スタイル:

以下では、完全なcssコードを確認できます。ご覧のとおり、CSS3transitiontransform構成を利用しています。

.dropdownクラスの定義に注意してください。これらは、ドロップダウンコンテナコンポーネントのレイアウトと、.titleおよびのなどの内部要素を定義するために使用されます.option

body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }

JavaScript:

次に、Javascript部分がどのように実装されているかを見ていきます。最初に関数の定義を確認し、次にこれらの関数を呼び出してドロップダウンアクションを実行するコードを確認します。

基本的に、リスナーがDOM要素に追加されるときに、ユーザーの操作内容に応じて3つのアクションが実行されます。

  1. ドロップダウン要素をクリックします
  2. ドロップダウンオプションの1つを選択する
  3. 現在選択されているオプションの変更

ES6の機能であるarrowfunctions (() => {})とconstキーワードを使用していることを明確にしておきたいと思います。最新バージョンのブラウザを使用している場合はおそらく問題ありませんが、それを覚えておいてください。

1.ドロップダウン要素をクリックします

function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }

ドロップダウン要素をクリックすると、開く(閉じている場合)または閉じる(開いている場合)。これはtoggleMenuDisplay、ドロップダウン要素のクリックイベントリスナーにバインドすることで発生します。この関数menuは、toggleDisplayandtoggleClass関数を使用して、その要素の表示を切り替えます。

2.ドロップダウンオプションの1つを選択します

function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }

3.現在選択されているオプションの変更

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

関数handleTitleChangeは要素のカスタムchangeイベントにバインドされ、title要素が変更されるたびに要素の内容.titleを変更し#resultます。このイベントのトリガーは前のセクションで行われます。

メインコード

//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

メインセクションには、ドロップダウンのタイトルとオプション要素を取得して、前のセクションで説明したイベントをバインドするための簡単なコードがいくつかあります。

デモ

このアプリケーションの完全なコードとデモはここにあります。

More Information

  • ES6 introduction
  • Arrow functions
  • Let and Const