世界を旅して暮らしたい放浪エンジニアブログ

Tailwind CSSでドロップダウンを実装する方法

Tailwind CSSでドロップダウンを実装する方法をまとめていきます。

[ 目次 ]

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ(@nakanakamu0828)です。

今回はTailwind CSSでドロップダウンを実装する方法を試していきたいと思います。

Tailwind CSS

jsfiddleで試す

CDNのtailwind.min.cssを読み込む

jsfiddleのreourceとしてtailwind.min.cssを読み込みます。
今回は、以下のURLを読み込むようにしています

https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

HTML

<div class="relative">
    <button
      class="border border-blue bg-white p-3 rounded text-blue shadow-inner"
      dropdown="true"
      data-target="dropdown-menu"
    >
      <span>BUTTON</span>
      <svg class="ml-2 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
        <g>
          <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
        </g>
      </svg>
    </button>
    <div
      id="dropdown-menu"
      class="invisible absolute w-48 pin-t pin-l mt-12 bg-white shadow rounded border overflow-hidden"
    >
        <a
            href="#"
            class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-grey whitespace-no-wrap"
        >
          Profile
        </a>
        <a
            href="#"
            class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-grey whitespace-no-wrap"
        >
          Logout
        </a>
    </div>
</div>

Javascript(ES6)

const $dropdowns = Array.prototype.slice.call(document.querySelectorAll('[dropdown="true"]'), 0)
if ($dropdowns.length > 0) {
    $dropdowns.forEach($el => {
        $el.addEventListener("click", event => {
          document.getElementById($el.dataset.target).classList.toggle("invisible")
        })
    })
}

invisibleクラスの有無でドロップダウンメニューの表示・非表示を切り替えます。

jsfiddleを確認

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts