シンプルなアコーディオンメニューを使用して

この記事では、HTML、CSS、JavaScriptコードを使用したアコーディオンメニューの作成方法を紹介します.以前より多くのタイプのデザインを見せましたAnimated CSS accordion menus . 今ではJavaScriptでそれを再現する時間です.
応答アコーディオンメニューには、元の見出しがあります.その見出しをクリックすると、その見出しに関連するすべての情報は、以下に表示することができます.
Accordion Menu 一つの場所に大量の情報をきちんと整理できる現代のコンテンツ構造です.このタイプの構造は、異なるタイプのウェブサイトで使用されます.このタイプのデザインは、FAQセクションまたは質問回答セクションで主に使用されます.

ステップ1 :ウェブページのボックスを作成する
HTMLページとCSSコードを使ってそのページをデザインし、Webページにボックスを作成しました.私はここのウェブページの箱をつくりました、そして、私はそれのすべての見出しと情報を加えました.私はボックス500 pxの幅を使用して、背景色は白です.
私はそれが明るく見えるようにボックスの影を使用している.使用するborder-radius: 5px これらの箱の4つをいくぶん丸くするために.

<div class="accordionWrapper">

</div>

body{

  background: #16bbce;

  }

.accordionWrapper{
  padding:30px;
  background:#fff;
  float:left;
  width:500px;
  border-radius: 5px;
  box-sizing:border-box;
  margin:10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}

ステップ2:アコーディオンメニューのすべての情報を追加
今私はすべての種類の見出しと情報を次のHTMLコードを使用して追加しました.以下の3つの見出しとその情報を3つのステップに追加しました.
この情報の代わりに、画像や何かを使用することができます.私はここで3つの情報セクションを追加した場合は、増加したり、必要に応じて量を減らす.

<div class="accordionItem open">
   <h2 class="accordionItemHeading">Accordions Menu HTML CSS <span>+</span></h2>

    <div class="accordionItemContent">
       <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>

</div>

<div class="accordionItem close">
   <h2 class="accordionItemHeading">Accordion Menu Javascript  <span>+</span></h2>

    <div class="accordionItemContent">
       <p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
    </div>
</div>

<div class="accordionItem close">
   <h2 class="accordionItemHeading">Accordion Menu Jquery <span>+</span></h2>

    <div class="accordionItemContent">
       <p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
    </div>
</div>

ステップ3:上記の情報をデザインする
私は今、上記のHTMLコードを使用して追加した情報を設計しました.最初に、私は見出しを設計しました.見出しを使ったfont-size: 22px and background: #2980b9 . 私は、各見出しでプラス記号(+)を使いました.

.accordionItem{
    float:left;
    display:block;
    width:100%;
    box-sizing: border-box;
    font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:10px;
    font-size: 22px;
    font-weight: 400;
    background:#2980b9;
    color:#fff;
    width:100%;
    border-radius: 3px;
    box-sizing: border-box;
}
.accordionItemHeading span{
  float: right;
  font-size: 25px;
}

ステップ4:閉じている間、このメニューをデザインする
閉じるこの動画はお気に入りから削除されています.まず、次のコードを使用して近い状態を設計しました.
ここで使ったheight: 0px コンテンツの中では、その内容が近いうちに見ることができない.

.close .accordionItemContent{
    height:0px;
    transition:height 1s ease-out;
    transform: scaleY(0);
    float:left;
    display:block;


}

ステップ5:開いている間、このメニューをデザインする
現在、私は以下のCSSコードを使用してオープン状態を設計しました.このコードは、これらの見出しをクリックすると、コンテンツがどのように表示されるかを決定します.
コンテンツの特定の高さはここでは与えられません.この高さはコンテンツの量に依存します.ここで背景色は白を使用し、コンテンツの周りに光の境界線を使用しました.

.open .accordionItemContent{
    padding: 20px;
    background-color: #f0f1f1;
    border: 1px solid #ddd;
    width: 100%;
    margin: 0px 0px 10px 0px;
    display:block;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.4s ease;
    box-sizing: border-box;
}

.open .accordionItemHeading{
    margin:0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #073e63;
    color: #cdd7d8;
}

Step 6 : JavaScriptを使用したシンプルなアコーディオンメニューの有効化
今、JavaScriptを使ってこのメニューバーを起動しました.つまり、テキストをクリックすると、関連する情報が表示されます.JavaScriptコードを使用してこの作業を有効にしました.
まず、acordionItemの定数とアコーディオニエネードを1つずつ設定します.

var accItem = document.getElementsByClassName('accordionItem');
    var accHD = document.getElementsByClassName('accordionItemHeading');

今、私は以下のJavaScriptコードを使用して、このアニメーションアコーディオンメニューのメニューバーをアクティブにしました.あなたが知っていない場合は、基本的なJavaScriptを知ってほしい.

for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordionItem close';
        }
        if (itemClass == 'accordionItem close') {
            this.parentNode.className = 'accordionItem open';
        }
    }

うまくいけば、上記のチュートリアルから、HTML、CSS、およびJavaScriptを使用してアコーディオンメニューを作成する方法を学びました.
私はすでにブートストラップとjQueryを通してこの種のデザインを作りました.必要に応じてそれらを見ることができます.
あなたは、このようなより多くのチュートリアルのために私のブログを訪問することができます.
https://www.foolishdeveloper.com/