JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
  	    <link href="css/destyle.css" rel="stylesheet">
       	<link href="css/style.css" rel="stylesheet">
</head>
<body>
	<div class="body-wrapper">
		<header class="header">
			<div class="header-inner">
				<div class="header-left">
					<h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1>
					<nav class="nav">
						<ul class="header-list">
							<li class="header-item">
								<a href="./Room/room.html">お部屋</a>
							</li><!-- /.header-item -->
							<li class="header-item">
								<a href="./Menu/menu.html">お料理</a>
							</li><!-- /.header-item -->
							<li class="header-item">
								<a href="./Onsen/onsen.html">温泉</a>
							</li><!-- /.header-item -->
						</ul><!-- /.header-list -->
					</nav><!-- /.nav -->
				</div>
				<div class="header-right">
					<div class="header-link" id="js-modal">
						<a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
						 宿泊予約</a>
					</div><!-- /.header-link -->
					<button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
				</div><!-- /.header-right -->
			</div><!-- /.header-inner -->
		</header><!-- /.header -->
		<div class="overlay"></div><!-- /.overlay -->
	</div>
    <script src="Js/jquery-3.6.0.min.js"></script>
    <script src="Js/script.js"></script>
</body>
</html>

CSS

@charset "UTF-8";
.body-wrapper {
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  color: #000000;
  min-width: 100vw;
}



a {
  text-decoration: none;
}

li {
  list-style: none;
}

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  max-height: 80px;
  background-color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 20px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header {
    position: fixed;
    top: 0;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 599px) {
  .header {
    position: fixed;
    top: 0;
    padding: 8px 10px;
    max-height: 60px;
  }
}

.header-inner {
  max-width: 1880px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.header-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.header-left h1 {
  display: block;
}

@media screen and (max-width: 599px) {
  .header-left h1 {
    width: 100px;
  }
}

.header-left h1 .logo img {
  display: block;
  max-width: 130px;
  width: 100%;
  height: 130px;
  margin: 20px 120px 20px 20px;
}

.header-left .nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content:...

JavaScript

/* humberger-menu Drawer-Menu*/
/* humberger */

$(function(){

$(".humburger").on('click', function(){
  
 if($("this").hasClass('_active')){
  $(this).removeClass('_active');
  $(".line").removeClass('_open');

  $(".nav").removeClass("nav-open");
  // $(".drawer-nav").removeClass('_active');
  $('.overlay').removeClass('_open');
  $('html').removeClass('scroll-prevent') // 追記
 
}
else{
      $(this).addClass('_active');
      $('.line').addClass('_open');

      $(".nav").addClass("nav-open");
      $('.drawer-nav').addClass('_open');
      $('.overlay').addClass('_open');
      $('html').toggleClass('scroll-prevent') // 背景を固定 
}
});

 $('.humburger , .overlay').on('click',function(){
   
    if($(this).hasClass('_open')){

      $(this).removeClass('_open');
      $('.humburger').removeClass('_active');
      $('.line').removeClass('_open');
     
      $(".nav").removeClass('nav-open');   
      $('html').removeClass('scroll-prevent') // 追記
      // $('.drawer-nav').removeClass('_active');

    }
  }); 

});