tailwindでハンバーガーメニューをつくる

Jan 22, 2021 23:21 · 691 words · 2 minute read

途中までやったところのメモ

const Nav = () => (
  <header className="container mx-auto text-black">
    <nav className="flex justify-between items-center">
      <div className="p-3">
        <Link href="/">
          <img src="/image/logo.png" width="250" height="30" />
        </Link>
      </div>
      <div>
        <button className="md:hidden">
          <svg className="h-6 w-6 fill-current" viewBox="0 0 24 24">
            <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z" />
          </svg>
        </button>
      </div>
      <div className="md:block hidden">
        <Links />
      </div>
    </nav>
    <div className="md:hidden">
      <Links />
    </div>
  </header>
)

const Links = () => (
  <ul className="md:flex md:justify-end">
    <MenuItem url="/foo">FOO</MenuItem>
    <MenuItem url="/bar">BAR</MenuItem>
    <MenuItem url="/baz">BAZ</MenuItem>
  </ul>  
)
const MenuItem = ({ url, children, isLast }) => (
  <li className={isLast ? "" : "border-b"}>
    <span className="block px-8 py-2 my-2 hover:bg-gray-100 rounded md:px-2 md:text-xs">
      <Link href={url}>{children}</Link>
    </span>
  </li>
);

items-center(align-items:center;)で揃えることができます。

items-center はフォントの高さを揃えるために入っている

flex justify-between によって、nav タグの中身が縦でなく横に並ぶようになる。 justify-between は端から端の範囲で要素が等間隔で並ぶ指定。

Use justify-between to justify items along the container’s main axis such that there is an equal amount of space between each item:

li. hover:bg-gray-100 rounded

  • リンクがホバーで色がつくように
  • どうせなら角丸で色がつくように

li. border-b

  • 区切り線のために下線をひく
  • margin/paddingの外につけたいのでspanでなくliに

ul. md:flex md:justify-end

  • iPad以上の大きさの画面(PC画面)でリンクアイテムを横並びに
  • リンクアイテムは右に寄せたいのでjustify-end

button. md:hidden

ハンバーガーを非表示に。

span. md:px-2 md:text-sm

リンクアイテムの余白と文字サイズを調整

md:block hidden

この部分

    <nav>
      ...
      <div className="md:block hidden">
        <Links />
      </div>
    </nav>
    <div className="md:hidden">
      <Links />
    </div>

tailwindcssではメディアクエリの指定は この画面サイズより小さいとき という指定になる。

  • 上のdomはmd(iPadの)より大きい画面サイズで display: block
    • それより小さいサイズでは display:none (hidden)
  • md(iPadの)より大きい画面サイズで display: hidden
    • それより小さいサイズではそのまま表示されている

残りTODO

  • PC画面のときだけリンクアイテムをロゴと同じ高さにしたい
  • ハンバーガーメニューの開閉
tweet Share