<header>
  <h1>:targetハンバーガー</h1>
<nav>
  <div id="open" class="btn"><a href="#g_menu">三</a></div>
  <div id="g_menu">
    <div id="close" class="btn"><a href="#">×</a></div>
    <ul>
      <li><a href="#title1">メニュー1</a></li>
      <li><a href="#title2">メニュー2</a></li>
      <li><a href="#title3">メニュー3</a></li>
      <li><a href="#title4">メニュー4</a></li>
      <li><a href="#title5">メニュー5</a></li>
      <li><a href="#title6">メニュー6</a></li>
      <li><a href="#title7">メニュー7</a></li>
    </ul>
  </div>
</nav>
</header>
<article>
  <section id="title1">
    <h2>タイトル1</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <section id="title2">
    <h2>タイトル2</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <section id="title3">
    <h2>タイトル3</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <section id="title4">
    <h2>タイトル4</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <section id="title5">
    <h2>タイトル5</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <section id="title6">
    <h2>タイトル6</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <section id="title7">
    <h2>タイトル7</h2>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
    <P>テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。テキストテキストテキスト、テキストテキストテキスト。</P>
  </section>
  <article>
html {
    font-family: sans-serif; 
    scroll-behavior: smooth;
}

header {
  display: flex;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
  border-left: 5px solid #aaa;
  padding: 0 0 0 10px;
}

header h1 {
  font-size: 20px;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  opacity: 0.7;
}

nav {
  margin: 0 0 0 auto;
  width: 150px;
  padding: 10px;
}

.btn {
  text-align: right;
}

.btn a {
  display: inline-block;
  text-align: center;
}

#open a {
  background: #eee;
  width: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: 1s;
}

#close a {
  color: #fff;
  background: #aaa;
  width: 30px;
  line-height: 30px;
  border-radius: 15px;
}

#g_menu li {
  list-style: none;
}

#g_menu a {
  color: #fff;
}

#g_menu {
  height: 100%;
  width: 150px;
  padding: 20px;
  background: rgba(0, 0, 0,.6);
  transition: right 1s;
  position: fixed;
  top: 0;
}

#g_menu:not(:target) {
			right: -100%;
}

#g_menu:target {
			right: 0;
}

article {
  padding: 20px 0;
} 

section {
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

h2 {
  border-bottom: 1px solid #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.