More than 1 year has passed since last update.

[tailwind]ハンバーガースニペット

Last updated at 2023-03-11Posted at 2023-03-11

ハンバーガーメニュー意外とスニペット少ない気がします。
毎回面倒ですよね。ということでサンプルスニペットです。
ちょっと雑すぎるけど🙇‍♂️

こんな感じのハンバーガーメニュー

code

hoge.astro

<body class='relative'>
  <nav id='nav' class='top-0 fixed w-screen h-screen transition duration-700 -right-[100vw] bg-blue-800'>
    <ul>
      <li><a href='/'>list1</a></li>
      <li><a href='/'>list2</a></li>
      <li><a href='/'>list3</a></li>
      <li><a href='/'>list4</a></li>
      <li><a href='/'>list5</a></li>
    </ul>
  </nav>
  <div
    id='hamburger'
    class='mr-0 ml-auto flex flex-col justify-between w-7 h-4 cursor-pointer transition duration-1000 [&>span]:bg-black-800 [&>span]:w-5 [&>span]:h-[2px] [&>span]:duration-1000 [&>span]:transition'
  >
    <span id='line1'></span>
    <span id='line2'></span>
    <span id='line3'></span>
  </div>
</body>

<style>
  .in {
    transform: translateX(-100vw);
  }
  .line1 {
    transform: translateY(7px) rotate(45deg);
    top: 0;
  }
  .line2 {
    opacity: 0;
  }
  .line3 {
    transform: translateY(-7px) rotate(-45deg);
    bottom: 0;
  }
</style>

<script>
  const onClickHamburger = () => {
    document.getElementById('nav')?.classList.toggle('in')
    document.getElementById('line1')?.classList.toggle('line1')
    document.getElementById('line2')?.classList.toggle('line2')
    document.getElementById('line3')?.classList.toggle('line3')
  }
  document.getElementById('hamburger')?.addEventListener('click', onClickHamburger)
</script>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up