シンプルなアコーディオンメニュー

この記事では、シンプルなHTMLとCSSのコードだけを使用してアコーディオンメニューを作成する方法をお見せします.アコーディオンメニューを作成する多くの方法があります.しかし、私がこの記事を示すつもりである最も簡単な方法.私はこのメニューを非常に少量のHTMLとCSSコードを使って作成しました.
あなたはこのメニューバーについての詳細を知るために以下のvideo tutorialに従うことができます.閉じるこの動画はお気に入りから削除されています.
accordion menu bar
Demo: Click here
あなたは、上のダウンロードボタンをクリックすることによってそれを完全に自由にするのに必要なソースコードをダウンロードすることができます.あなたはライブデモを見るために上記のデモボタンを使用することができます.
要素を拡張するためにどのプログラミングコードを使用しているかを知りたい場合は、Download: Click hereとなります.以下の4つの手順でこのメニューバーを作成する方法を示しました.
follow the tutorial below
ステップ1:メニューとテキストを加えてください
このメニューバーおよび付随するテキストのメニューは、以下のプログラミングコードを使用してつくられた.ここでは6つのメニューを使います.あなたが好きなように多くのメニューとして追加することができますし、変更を加える.

 <!-- html code-->
    <h1>Pure CSS Accordion Menu</h1>
    <div class="accordionMenu">
        <!-- 1st menu  -->
        <input type="radio" name="trg1" id="acc1" checked="checked">
        <label for="acc1">Quisquam Doloremeos</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 2nd menu -->
        <input type="radio" name="trg1" id="acc2">
        <label for="acc2">Fugiat esse oditanimi</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 3rd menu -->
        <input type="radio" name="trg1" id="acc3">
        <label for="acc3">Quibusdam adipisci</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 4th menu -->
        <input type="radio" name="trg1" id="acc4">
        <label for="acc4">Harum animi placeat</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 5th menu -->
        <input type="radio" name="trg1" id="acc5">
        <label for="acc5">Obcaecati Quibusdam</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
        <!-- 6th menu -->
        <input type="radio" name="trg1" id="acc6">
        <label for="acc6">Modi excepturi</label>
        <div class="content">
            <div class="inner">
                It is a demo text.
            </div>
        </div>
    </div>

ステップ2:デザインの背景とメニュー
このアコーディオンメニューのメニュー
これらは設計されている.メニューの背景には青色が使用されている.

/* now add css code */
body{
    background: #ecf0f1;
    font-family: 'source sans pro';
    font-weight: 400;
}
h1{
    font-size: 35px;
    color: #2c97de;
    text-align: center;
}
.accordionMenu{
    width: 500px;
    margin: 0 auto;
}
.accordionMenu input[type=radio]{
    display: none;
}
.accordionMenu label{
    display: block;
    height: 50px;
    line-height: 47px;
    padding: 0 25px 0 10px;
    background: #2c97de;
    font-size: 18px;
    color: #fff;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #e6e6e6;
}

ステップ3 :デザインとメニューの内容を隠す
一般に、このメニューバーの内容は隠されていて、メニューだけが見える.以下のプログラミングコードは、それらを隠して、設計するために使われました.

.accordionMenu label::after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #ffffff;
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 10;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordionMenu .content{
    max-height: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.accordionMenu .content .inner{
    font-size: 1.2rem;
    color: #2c97de;
    line-height: 1.5;
    background: white;
    padding: 20px 10px;
}

ステップ4:アコーディオンメニューにいくつかのアニメーションを追加
一般に、メニューに関連する内容は隠されています.そのメニューをクリックすると、内容が表示されます.これを行うには、以下の特別なプログラミングコードが使用されています.

.accordionMenu input[type=radio]:checked + label:after{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordionMenu input[type=radio]:checked + label + .content{
    max-height: 2000px;
    height: auto;
}

私はこれらのいくつかのメソッドを使用して、このアコーディオンメニューを作成している.完全な情報を知りたい場合は です.このチュートリアルからうまくいけば、watch the video aboveを学びました.何か問題があれば、コメントしてください.最後までこの記事を読んでくれてありがとう.