---
title: 'jQuery下拉式選單(漢堡選單)'
---

jQuery下拉式選單(漢堡選單)
===
收起時

展開後

[TOC]
## HTML結構

<div class="container">
  <div class="header">
    <a href="#" class="ham-icon">
      <i class="fas fa-bars "></i>
    </a>
    <img src="https://firebasestorage.googleapis.com/v0/b/tzuhui-10c1e.appspot.com/o/others%2F202004%2F1587551913424-logo-new_%E5%B7%A5%E4%BD%9C%E5%8D%80%E5%9F%9F%201.png?alt=media&token=7f7e11bb-8470-4bec-8b77-ebda26cb6a76" alt="">
    <ul class="dropdown">
      <li><a href="#">系列鏡框</a></li>
      <li><a href="#">門市據點</a></li>
      <li><a href="#">部落格</a></li>
      <li><a href="#">常見問題</a></li>
    </ul>
  </div>
</div>

CSS
---

.container {
  width: 375px;
  margin: 0 auto;
}

.header {
  text-align: center;
  background: #AA0601;
  position: relative;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ham-icon {
  position: absolute;
  left: 13px;
  color: #FFFFFF;
}

.dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  max-height: 0px;
  transition: all 0.8s;
  overflow: hidden;
  z-index: 120;
}
.dropdown.active {
  max-height: 200px;
}

.dropdown li a {
  display: block;
  background: #AA0601;
  color: #FFFFFF;
  border-top: 1px solid #FFFFFF;
  padding: 16px 0;
  text-decoration: none;
}
.dropdown li a:hover {
  background: #8f0400;
}

Js
---

$('.ham-icon').click(function(e) {
  e.preventDefault();
  $('.dropdown').toggleClass('active')
})

> 理解為將icon設定一個click的事件，這件時還未發生時他是一個空值，當我們對dropdown這個class點擊時，將可以套入及不套入(點擊作用)active這個class，而active將會把原本的高度由0替換為200。

參考連結
---

> https://codepen.io/AliceChiang/pen/vYKdVMp