<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ハンバーガーメニューの練習</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- header -->
  <header class="header">
    
      <h1 class="site-title"><a href="./">クリ★スタ</a></h1><!-- ①サイトタイトル -->

      <div class="nav-wrapper"><!-- ②ナビゲーションメニュー -->
        <nav class="header-nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="https://crestadesign.org/">About</a></li>
            <li class="nav-item"><a href="https://crestadesign.org/">News</a></li>
            <li class="nav-item"><a href="https://crestadesign.org/">Access</a></li>
          </ul>
        </nav>
      </div>

      <div class="burger-btn"><!-- ③ハンバーガーボタン -->
        <span class="bars">
          <span class="bar bar_top"></span>
          <span class="bar bar_mid"></span>
          <span class="bar bar_bottom"></span>
        </span>
      </div>
    
    </header>
    <!-- //header -->
    
    <main>
      <!-- fv -->
      <div class="fv">
        <p class="main-copy">Cresta.Design</p>
      </div>
      <!-- //fv -->

      <!-- about -->
      <section class="section-wrapper" id="about">
        <h2 class="section-title">About</h2>
          <h3 class="about-title">ミニマルで<br>洗練されたデザインを。</h3>
          <p class="text_about">
            近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。
          </p>
      </section>
      <!-- //about -->
      
    </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

 
/**
 * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
 * http://cssreset.com
 * Copyright 2012 Yahoo! Inc. All rights reserved.
 * http://yuilibrary.com/license/
 */
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }

/* style.css */

/* -------------------- */
/* base
/* -------------------- */
body{
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}
li{
  list-style:none;
}
a{
    text-decoration: none;
    color:#fff;
}
img{
  width:100%;
  vertical-align: bottom;
}



/* -------------------- */
/* header
/* -------------------- */
.header{
    background-color: #1B1310;
    color: #fff;
    height:74px;
    padding: 0 120px;
    border-bottom:1px solid #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-list{
    /* navの横並び */
    display: flex;
}
.nav-item{
    /* メニューの右側に余白 */
    margin-right: 55px;
}

.burger-btn{
  display: none;
}

/* ------------------ */
/* fv
/* ------------------ */
.fv{
  height:90vh;
  background-color:#141414;
  background-image: url(../img/fv-bgi@2x.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
.main-copy{
   font-size: 50px;
   color: #fff;
   font-weight: bold;
   border:2px solid #fff;
   padding: 34px 42px;
}

/* ------------------ */
/* about
/* ------------------ */
.section-title{
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 70px;
}
h3{
  font-size: 2.4rem;
  font-weight: bold;
  line-height:2;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}
.section-wrapper{
  padding:100px 10% 50px; 
  
}




@media screen and (max-width:768px){
  /* ----------------------- */
  /* base_sp
  /* ----------------------- */
  

  /* ------------------ */
  /* humberger-menu */
  /* ------------------ */
  .header{
      padding: 0 5%;
  }
  .burger-btn{
      display: block;
      width: 39px;
      height: 39px;
      position: relative;
      z-index: 3;
  /*   codepenの挙動のため */
    background-color:transparent;
    border:none;
    }
    .bar{
      width: 20px;
      height: 1px;
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
    }
    .bar_top{
      top: 10px;
    }
    .bar_mid{
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .bar_bottom{
      bottom: 10px;
    }
    .burger-btn.close .bar_top{
      transform: translate(-50%,10px) rotate(45deg);
      transition: transform .3s;
    }
    .burger-btn.close .bar_mid{
      opacity: 0;
      transition: opacity .3s;
    }
    .burger-btn.close .bar_bottom{
      transform: translate(-50%,-8px) rotate(-45deg);
      transition: transform .3s;
    }
    .nav-wrapper{
      display: none;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
     }
     .header-nav{
        width: 100%;
        height: 100%;
        background-color:#1B1310;
        z-index: 2;
      }
     .header-nav .nav-list{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
      }
      .header-nav .nav-item{
        margin-right: 0;
        margin-bottom: 40px;
      }
  
  /* ------------------ */
  /* fv */
  /* ------------------ */
  .main-copy{
    font-size: 30px;
  }
  
  /* ------------------ */
  /* about */
  /* ------------------ */
  h3{
      font-size: 20px;
      margin-bottom: 30px;
  }
  .section-wrapper{
      padding:100px 5% 50px;  
  }


}  
  
 

$('.burger-btn').on('click',function(){//.btn_triggerをクリックすると
  $('.burger-btn').toggleClass('close');//.btn_triggerにcloseクラスを付与(ボタンのアニメーション)
  $('.nav-wrapper').fadeToggle(500);//.nav-wrapperが0.5秒でフェードイン(メニューのフェードイン)
  $('body').toggleClass('noscroll');//bodyにnoscrollクラスを付与(スクロールを固定)
 });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.