ハンバーガーメニューとタブメニュー

ハンバーガーメニューについてです。

ふわっと全面表示させるものと、

右から左へスライド表示させる２パターンです。

デモもあります。

デモ(ふわっと表示)

html

  <header id="header">
      <h1>header</h1>
    </header>
    <main>
      <div id="box1">
        <h3>box1</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
        <button data-trigger-modal="box-1-modal">box-1-modal</button>
      </div>
      <div id="box2">
        <h3>box2</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
      </div>
      <div id="box3">
        <h3>box3</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
      </div>
      <div id="box4">
        <h3>box4</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
      </div>
      <div id="box5">
        <h3>box5</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
        <button data-trigger-modal="box-5-modal">box-5-modal</button>
      </div>
      <div id="box6">
        <h3>box6</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
      </div>
      <div id="box7">
        <h3>box7</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
      </div>
      <div id="box8">
        <h3>box8</h3>
        <p>
          Il aime lire des livres dans son temps libre, surtout des romans
          policiers et des livres de science-fiction. Il trouve que ces genres
          lui permettent de s'évader de la réalité et d'explorer des mondes
          imaginaires. En plus, il participe souvent à des clubs de lecture où
          il discute des derniers livres qu'il a lus avec ses amis.
        </p>
      </div>
    </main>

    <div class="nav">
      <ul>
        <li class="has-dropdown">
          <p style="margin: 0">box1</p>
          <div class="dropdown" style="display: none; margin: 20px 0 0 10px">
            <a class="close_class" href="#box1">box1</a>
          </div>
        </li>
        <li class="has-dropdown">
          <p style="margin: 0">box2</p>
          <div class="dropdown" style="display: none; margin: 20px 0 0 10px">
            <a class="close_class" href="#box2">box2</a>
          </div>
        </li>
        <li><a class="close_class" href="#box3">box3</a></li>
        <li><a class="close_class" href="#box4">box4</a></li>
        <li><a class="close_class" href="#box5">box5</a></li>
        <li><a class="close_class" href="#box6">box6</a></li>
        <li><a class="close_class" href="#box7">box7</a></li>
        <li><a class="close_class" href="#box8">box8</a></li>
      </ul>
    </div>

    <div class="menu"><span></span><span></span><span></span></div>
    <div id="box-1-modal" class="modal">
      <div class="modal-content">
        <h2>box-1-modal</h2>
        <p>
          Le week-end dernier, je suis allé à la campagne avec mes amis. Nous
          avons fait une longue promenade dans la forêt, puis nous avons
          pique-niqué près d’un lac. C’était très calme et relaxant. Le soir,
          nous avons regardé les étoiles en parlant de nos souvenirs d’enfance.
        </p>
        <button data-modal-close>閉じる</button>
      </div>
    </div>
    <div id="box-5-modal" class="modal">
      <div class="modal-content">
        <h2>box-1-modal</h2>
        <p>
          Le week-end dernier, je suis allé à la campagne avec mes amis. Nous
          avons fait une longue promenade dans la forêt, puis nous avons
          pique-niqué près d’un lac. C’était très calme et relaxant. Le soir,
          nous avons regardé les étoiles en parlant de nos souvenirs d’enfance.
        </p>
        <button data-modal-close>閉じる</button>
      </div>
    </div>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"
    ></script>

css

   body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      header {
        border-bottom: 2px solid #333;
        padding: 10px 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transition: top 0.3s;
        z-index: 1;
        background: #fff;
      }
      h1 {
        margin: 0;
        font-size: 1.5rem;
      }
      main {
        margin-top: 50px; /* ヘッダーの高さ分だけ余白を作成 */
        padding: 20px;
      }
      main > div {
        padding: 5px 20px 10px;
        margin-bottom: 20px;
      }

      main > div p {
        line-height: 1.5em;
      }

      h3 {
        opacity: 0.9;
      }

      #box1,
      #box5 {
        background: pink;
      }
      #box2,
      #box6 {
        background: skyblue;
      }
      #box3,
      #box7 {
        background: plum;
      }
      #box4,
      #box8 {
        background: lightgreen;
      }

      .nav ul {
        display: flex;
        justify-content: space-around;
        margin: 0;
        padding: 50px 0;
      }

      .nav ul li {
        list-style-type: none;
      }

      .nav ul li.has-dropdown {
        padding: 20px 4%;
      }

      .nav ul li:not(:has(.dropdown)) a {
        padding: 20px 4%;
      }

      .nav ul li a {
        display: block;
        text-decoration: none;
        color: rgb(26, 26, 28);
      }

      .nav {
        width: 100%;
        background: #eee;
        overflow-y: auto;
        position: fixed;
        top: 0;
        height: 100vh;
        opacity: 0;
        z-index: 2;
        visibility: hidden;
        transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
      }
      .show {
        overflow: hidden;
      }

      .show .nav {
        opacity: 0.9;
        visibility: visible;
        /* animation: fadein 0.3s ease-in 0s forwards; */
      }

      /* @keyframes fadein {
          0% {
            display: none;
            opacity: 0;
          }

          1% {
            display: block;
            opacity: 0;
          }

          100% {
            display: block;
            opacity: 0.9;
          }
        } */

      .nav ul {
        flex-wrap: wrap;
        flex-direction: column;
        align-content: space-between;
      }

      .nav ul li {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
      }

      .nav ul li:first-child::after {
        content: "";
        position: absolute;
        right: 4%;
        transition: all 0.2s ease-in-out;
        display: block;
        width: 8px;
        height: 8px;
        border-top: solid 2px #000;
        border-right: solid 2px #000;
        transform: rotate(-45deg);
        top: 25px;
      }

      .nav ul li:nth-of-type(2) p {
        position: relative;
      }
      .nav ul li:nth-of-type(2) p::before {
        content: "";
        display: inline-block;
        width: 13px;
        height: 2px;
        background-color: #000;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: opacity 0.5s;
      }

      .nav ul li:nth-of-type(2) p::after {
        content: "";
        display: inline-block;
        width: 13px;
        height: 2px;
        background-color: #000;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        transition: transform 0.5s;
      }
      .nav ul li.open:nth-of-type(2) p::after {
        transform: translateY(-50%) rotate(0deg);
      }

      .nav ul li.open:nth-of-type(2) p::before {
        opacity: 0;
      }

      .nav ul li.open:first-child::after {
        transform: rotate(135deg);
      }

      .nav ul li:nth-of-type(3) a {
        position: relative;
        display: block;
      }

      .nav ul li:nth-of-type(3) a::after {
        content: "";
        position: absolute;
        right: 4%;
        transition: all 0.2s ease-in-out;
        display: block;
        width: 8px;
        height: 8px;
        border-top: solid 2px #000;
        border-right: solid 2px #000;
        transform: rotate(45deg);
        top: 25px;
      }

      .menu {
        position: fixed;
        cursor: pointer;
        width: 30px;
        height: 30px;
        top: 10px;
        right: 10px;
        z-index: 2;
      }

      .menu span {
        display: inline-block;
        transition: all 0.4s;
        position: absolute;
        left: 0;
        height: 3px;
        border-radius: 2px;
        background: #6a6a6a;
        width: 100%;
      }

      .menu span:nth-of-type(1) {
        top: 0;
      }

      .menu span:nth-of-type(2) {
        top: 10px;
      }

      .menu span:nth-of-type(3) {
        top: 20px;
      }

      .menu.show span:nth-of-type(1) {
        top: 5px;
        left: 0;
        transform: translateY(6px) rotate(-45deg);
      }

      .menu.show span:nth-of-type(2) {
        opacity: 0;
      }

      .menu.show span:nth-of-type(3) {
        top: 17px;
        left: 0;
        transform: translateY(-6px) rotate(45deg);
      }
      @media (min-width: 640px) {
        .nav,
        .menu {
          display: none;
        }
      }
      body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
      }
      .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        overflow-y: auto;
      }
      .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        max-height: 80vh;
        overflow-y: auto;
      }

js

 $(function () {
        $(".menu").on("click", function () {
          $(this).toggleClass("show");
          $("body").toggleClass("show");
        });

        $(".close_class").on("click", function () {
          $("body").removeClass("show");
          $(".menu").removeClass("show");
        });

        $('a[href^="#"]').on("click", function (e) {
          e.preventDefault();

          let href = $(this).attr("href");
          if (href === "#" || href === "") return;

          let target = $(href);
          if (target.length) {
            let rect = target[0].getBoundingClientRect().top;
            let offset = window.pageYOffset;
            let gap = 50;
            let position = rect + offset - gap;

            window.scrollTo({
              top: position,
              behavior: "smooth",
            });
          }
        });

        $(document).on("click", ".nav ul li", function () {
          $(this)
            .children("div:not(:animated)")
            .slideToggle(200)
            .parent("li")
            .toggleClass("open");
        });

        let prevScrollpos = window.pageYOffset;
        let header = document.getElementById("header");

        window.onscroll = function () {
          let currentScrollPos = window.pageYOffset;

          if (prevScrollpos > currentScrollPos) {
            header.style.top = "0"; // スクロールアップ時にヘッダーを表示
          } else {
            header.style.top = "-50px"; // スクロールダウン時にヘッダーを隠す
          }
          prevScrollpos = currentScrollPos;
        };
      });

      const modaltrigers = document.querySelectorAll("[data-trigger-modal]");
      modaltrigers.forEach(function (triger) {
        triger.onclick = function () {
          let modal = triger.getAttribute("data-trigger-modal");
          document.getElementById(modal).style.display = "flex";
          document.body.classList.add("modal-open");
        };
      });
      const closetrigers = document.querySelectorAll("[data-modal-close]");
      // const closetrigers = document.querySelectorAll(".modal");
      closetrigers.forEach(function (triger) {
        triger.onclick = function () {
          let modal = triger.closest(".modal");
          modal.style.display = "none";
          document.body.classList.remove("modal-open");
        };
      });

      document.querySelectorAll(".modal").forEach((modal) => {
        modal.addEventListener("click", (event) => {
          if (event.target === modal) {
            modal.style.display = "none";
            document.body.classList.remove("modal-open");
          }
        });
      });

デモ(右から左へスライド表示)

html

<body>


  <main>
	  <div id="box1">
	<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	  </div>
	<div id="box2">
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	</div>
	<div id="box3">
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	</div>
	<div id="box4">
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
		<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
	</div>
  </main>
  <footer>
		<div class="nav">
			<ul>
				<li><a class="close_class" href="#box1">Menu1</a></li>
				<li><a class="close_class" href="#box2">Menu2</a></li>
				<li><a class="close_class" href="#box3">Menu3</a></li>
				<li><a class="close_class" href="#box4">Menu4</a></li>
			</ul>
		</div>
  </footer>
  <div class="menu"><span></span><span></span><span></span></div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/menu.js"></script>
  </body>

css

main {
	padding: 0 4% 100px;
}

main div {
	height: 500px;
}

#box1 {
	background: pink;
} 
#box2 {
	background: skyblue;
} 
#box3 {
	background: plum;
} 
#box4 {
	background: lightgreen;
} 

footer {
	padding: 0 0 50px;
}

.nav ul {
	display: flex;
	justify-content: space-around;
	padding: 0;
}

.nav ul li {
	list-style-type: none;
	padding: 10px 4%;
}

.nav ul li a {
	text-decoration: none;
	color: rgb(26, 26, 28);
}



@media (max-width: 1000px) {
	.nav{
		  width: 100%;
		  background: #eee;
		  overflow-y: auto;
		  position: fixed;
		  top: 0;
		  right: -120%;
		  height: 100vh;
		  transition: all .6s;
      opacity: .9;
		  
	}
	.show {
		overflow: hidden;
		
	}
	
	footer ul {
		
		flex-wrap: wrap;
		flex-direction: column;
		align-content: space-between;
	}
	
	
	
	.show .nav {
		
		right: 0;
		
		
	}
	
	.nav ul li {
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}
	.menu{
	  position: fixed;
	 
	  cursor: pointer;
		width: 30px;
		height:30px;
		bottom: 10px;
		left: 10px;
	 
	}
	
	.menu span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		left: 0;
		height: 3px;
		border-radius: 2px;
	  background: #6A6A6A;
		width: 100%;
	  }
	
	.menu span:nth-of-type(1) {
	  top:0; 
	}
	
	.menu span:nth-of-type(2) {
	  top:10px;
	}
	
	.menu span:nth-of-type(3) {
	  top:20px;
	}
	
	.menu.show span:nth-of-type(1) {
		top: 5px;
		left: 0;
		transform: translateY(6px) rotate(-45deg);
		
	}
	
	.menu.show span:nth-of-type(2) {
	  opacity: 0;
	}
	
	.menu.show span:nth-of-type(3){
		top: 17px;
		left: 0;
		transform: translateY(-6px) rotate(45deg);
		
	}
	
}

js

$(function() {
	$('.menu').on('click',function(){
		$('body').toggleClass('show');
		$(this).toggleClass('show');
	});
	
	$('.close_class').on('click',function(){
		$('body').removeClass('show');
		$('.menu').removeClass('show');
	})
	
	
});

動的なタブメニュー

html

<div class="tabs">
      <ul class="tab-buttons">
        <li class="tab-button active" data-tab="tab1">タブ1</li>
        <li class="tab-button" data-tab="tab2">タブ2</li>
        <li class="tab-button" data-tab="tab3">タブ3</li>
      </ul>

      <div class="tab-content active" id="tab1">タブ1の内容</div>
      <div class="tab-content" id="tab2">タブ2の内容</div>
      <div class="tab-content" id="tab3">タブ3の内容</div>
    </div>

css

 .tab-buttons {
        display: flex;
        list-style: none;
        padding: 0;
      }
      .tab-button {
        padding: 10px 20px;
        cursor: pointer;
        background: #eee;
        margin-right: 5px;
      }
      .tab-button.active {
        background: #333;
        color: #fff;
      }

      .tab-content {
        display: none;
        padding: 20px;
        background: #f5f5f5;
        margin-top: 10px;
      }
      .tab-content.active {
        display: block;
      }

js

 document.querySelectorAll(".tab-button").forEach((btn) => {
        btn.addEventListener("click", () => {
          const tabId = btn.dataset.tab;

          // タブボタンの active 切り替え
          document
            .querySelectorAll(".tab-button")
            .forEach((b) => b.classList.remove("active"));
          btn.classList.add("active");

          // コンテンツの active 切り替え
          document
            .querySelectorAll(".tab-content")
            .forEach((c) => c.classList.remove("active"));
          document.getElementById(tabId).classList.add("active");
        });
      });