cssのみでドロワーメニューの実装

  • LINEで送る

jqueryを使用せずややこしい書き込みもなしで実装できる

ドロワーメニューを作ってみました。

プレビュー

※hoverしてもメニューが出てくるのは店舗案内だけです。

※レスポンシブ対応はしてませんのでプレビューではPCでご覧ください。

HTML ▼

 <header>
        <nav>
            <ul class="nav__list">
                <li class="nav__item"><a href="" class="nav__link">店舗情報</a>
                    <div class="nav__box">
                        <ul class="nav__box--inner">
                            <li class="nav__box-title">
                                <a href="" class="nav__link">店舗案内</a>
                                <ul class="nav__box-list nav__box-list--3col">
                                    <li class="nav__box-item"><a href="" class="nav__link">店舗1</a></li>
                                    <li class="nav__box-item"><a href="" class="nav__link">店舗1</a></li>
                                    <li class="nav__box-item"><a href="" class="nav__link">店舗1</a></li>
                                </ul>
                            </li>
                            <li class="nav__box-title">
                                <a href="" class="nav__link">店舗一覧を見る</a>
                             </li>
                            <li class="nav__box-title">
                                <a href="" class="nav__link">展示会情報</a>
                                <ul class="nav__box-list">
                                    <li class="nav__box-item nav__box-item--1col"><a href="" class="nav__link">テキストテキスト</a></li>
                                    <li class="nav__box-item nav__box-item--1col"><a href="" class="nav__link">テキストテキスト</a></li>
                                    <li class="nav__box-item nav__box-item--1col"><a href="" class="nav__link">テキストテキスト</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div></li>
                    <li class="nav__item"><a href="" class="nav__link">about</a></li>
                <li class="nav__item"><a href="" class="nav__link">クリスマス</a></li>
                <li class="nav__item"><a href="" class="nav__link">お正月</a></li>
                <li class="nav__item"><a href="" class="nav__link">その他</a></li>
                <li class="nav__item"><a href="" class="nav__link">コラム</a></li>
                <li class="nav__item"><a href="" class="nav__link">会社概要</a></li>
                <li class="nav__item"><a href="" class="nav__link">検索</a></li>
            </ul>
        </nav>
</header>

css▼

.nav__list {
  max-width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 50px 0;
}

.nav__item:hover .nav__box--inner {
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.nav__link {
  color: #333;
}

.nav__box {
  position: relative;
}

.nav__box--inner {
  position: absolute;
  top: 25px;
  left: -45px;
  width: 1000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 20px;
  opacity: 0;
  -webkit-box-shadow: 0px 0px 5px;
          box-shadow: 0px 0px 5px;
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.nav__box-title {
  width: calc(100% / 2);
}

.nav__box-list {
  margin: 20px 0;
  border-top: 2px solid #000;
  width: 80%;
}

.nav__box-list--3col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.nav__box-list--3col .nav__box-item {
  padding-right: 10px;
}

.nav__box-item {
  margin-top: 10px;
}

.nav__box-item--1col {
  margin-bottom: 20px;
}

ポイントは

transition: all .5s; →ドロワーメニューの動きを設定
transform: scaleY(0); → 要素を拡大、または、縮小表示する際に使用
transform-origin: center top; →要素の変形transformにおける原点を設定
------------------------------
hoverしたら、センターのトップからY軸の方向へ0.5sで拡大してメニューを開いている様に見せる

こんな感じです。

めっちゃ簡単にできるのでお試しください!

jquery苦手な私には感動です。

cssでできることが増えてきているので引き出しを増やしていきたいですね!

おしまい!

  • LINEで送る

SNSでもご購読できます。

コメントを残す

*