HTML・CSSでドロップダウンリストのクリックしたらリストが表示されるパターンを作成してみました。【サンプルコードあり】

HTML・CSSでドロップダウンリストを作成してみた。
今回は、ホバーじゃなくクリックでリストが
下に出てくる方法でやってみました。

今回は、HTML・CSSだけでやってます。
JavaScriptの指定なども加えると
もっと動きをつけることも可能になります。

下記のような動きになりました。動画撮影はBandicam使用してます。

この動画はパソコン画面の動画撮影が簡単で録画できる
BANDICAM使ってます。無料でお試し可能↓

BANDICAM使ってパソコン画面動画はがとても使いやすくていい感じ！

書いたコード
YouTube動画はこちら
フリーランス案件

書いたコード

実際に書いたコードはこちらになります。

今回は、labelを使ってクリックでリストが
表示されるようにしてます。

HTML

<section class="contents">
  <div class="contents-wrapper">
    <div class="list-item">
      <div class="arow-list">
        <label for="product-list">
          製品情報
        </label>
      </div>
      <input type="checkbox" id="product-list" />
      <ul id="child-lists">
        <li class="child-link">
          <a class="child-menu" href="#">
            商品1
          </a>
        </li>
        <li class="child-link">
          <a class="child-menu" href="#">
            商品2
          </a>
        </li>
        <li class="child-link">
          <a class="child-menu" href="#">
            商品3
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

製品情報

</label>

</div>

商品1

</a>

</li>

商品2

</a>

</li>

商品3

</a>

</li>

</ul>

</div>

</section>

CSS

*{
	box-sizing: border-box;
}

ul, li{
	margin: 0;
	padding: 0;
}

.list-item{
	max-width: 200px;
	margin: 100px auto;
}

.arow-list{
	position: relative;
	text-align: center;
	background-color: #176b1e;
	color: #fff;
	border: 1px solid #000;
}

label{
	display: block;
	margin: 0 0 4px 0;
	padding: 19px 40px 15px 40px;
	line-height: 1;
	cursor: pointer;
}

.list-item a{
	display: block;
	text-decoration: none;
}

input{
	display: none;
}

.list-item li{
	height: 0;
	overflow: hidden;
	-webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.arow-list::after{
	content: "";
	width: 15px;
	height: 15px;
	background-image: url(./images/arow-drawer-white.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 85%;
	transform: translateY(-25%);
}

#child-lists li{
	text-align: center;
	border: 1px solid #000;
	border-top: none;
	background-color: #176b1e80;
	opacity: 0;
}

#product-list:checked ~ 
#child-lists li{
	height: 50px;
	opacity: 1;
}

#child-lists li a{
	padding: 17px 40px;
	color: #fff;
}