<body>
  <header>
    <button> ← <span>SWIPE!!</span></button>
    <nav>
      <ul>
        <li><a href="">ページ1</a></li>
        <li><a href="">ページ2</a></li>
        <li><a href="">ページ3</a></li>
        <li><a href="">ページ4</a></li>
        <li><a href="">ページ5</a></li>
        <li><a href="">ページ6</a></li>
        <li><a href="">ページ7</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>ダミーテキストダミーテキスト</h1>
    <p>ダミーテキストダミーテキストダミー<br>テキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <h1>ダミーテキストダミーテキスト</h1>
    <p>ダミーテキストダミーテキストダミー<br>テキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <h1>ダミーテキストダミーテキスト</h1>
    <p>ダミーテキストダミーテキストダミー<br>テキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
  </main>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script>
    $(function() {
      //swipeで開く
      $("button").on("touchstart", start_check);
      $("button").on("touchmove", move_check);
      $("button").on("touchend", end_check);
      let moveX, posiX;
      //70px以上のスワイプでメニューが吸着する
      let threshold = 70;

      function start_check(event) {
        posiX = getX(event);
        moveX = '';
      }

      function move_check(event) {
        $('header').css({
          'left': getX(event) - 30 + 'px',
          'transition': 'none',
        })
        if (posiX - getX(event) > threshold) {
          moveX = "left";
        } else if (posiX - getX(event) <= -threshold) {
          moveX = "right";
        } else {
          moveX = "";
        }
        return false;
      }

      function end_check(event) {
        if (moveX == "left") {
          $('header').addClass('is-open')
        } else if (moveX == "right") {
          $('header').removeClass('is-open')
        } else {}
        $('header').css({
          'left': '',
          'transition': '',
        })
      }

      function getX(event) {
        return (event.originalEvent.touches[0].pageX);
      }
    })
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      max-width: 1000px;
      margin: 0 auto;
      background-color: #ffdc3e;
    }

    h1 {
      margin: 20px 0;
    }

    header {
      position: fixed;
      top: 0;
      right: 0;
      left: calc(100% - 60px);
      /* left: 0; */
      z-index: 9999;
      display: grid;
      grid-template-columns: 60px auto;
      transition: .4s ease;
    }

    header.is-open {
      left: 0;
    }

    button {
      width: 60px;
      height: 50px;
      border: 1px solid #000;
      border-right-width: 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
    }

    nav {
      background-color: #fff;
      overflow: auto;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      border-left: 1px solid #000;
    }

    nav ul {
      list-style: none;
    }

    nav li a {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 20px;
      height: 50px;
      color: black;
      text-decoration: none;
      border-bottom: 1px solid #000;
      white-space: nowrap;
    }

    main {
      padding: 20px;
    }
  </style>
</body>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.