Simple header with menu button

メニューボタン付きのシンプルなヘッダー

by Kissy

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Simple header with menu button.</title>
  </head>
  
  <body>
    <header>
      <div class="header_inner">
        <!-- タイトル -->
        <h1 class="blog-title">
          <a href="#">
            Header
          </a>
        </h1>
        
        <!-- ボタンメニュー -->
        <ul class="header_menu">
          <li class="menu_button"><label for="menu_toggle"></label></li>
        </ul>
      </div>
    </header>
    
    <input type="checkbox" id="menu_toggle"/>
    <nav class="global-nav">
      <ul class="nav-list">
        <li class="nav-item">
          <a href="#">Home</a>
        </li>
        <li class="nav-item">
          <a href="#">WEB design</a>
        </li>
        <li class="nav-item">
          <a href="#">WordPress</a>
        </li>
        <li class="nav-item">
          <a href="#">Contact</a>
        </li>
        <li class="nav-item close-menu">
          <label for="menu_toggle">Close</label>
        </li>
      </ul>
    </nav>
    
    <main>
      <p class="description">
        メニューボタン付きのシンプルなヘッダー      
      </p>
    </main>
    
    <footer></footer>
  </body>
</html>

CSS

.header_inner {
  display: flex;
  height: 2rem;
  padding: 0px .5rem;
  justify-content: space-between;
  align-items: center;
}
.header_inner a {
  color: black;
  text-decoration: none;
}
.header_inner ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header_inner ul li {
  display: inline-block;
  padding: 0px 1rem;
  height: 2rem;
  width: 100%;
  font-size: 2rem;
  line-height: 2rem;
  transition: 256ms;
}
.menu_button label:hover {
  -webkit-filter: brightness(85%);
  cursor: pointer;
}
.menu_button label:before {
  font-family: "FontAwesome";
  content: '\f0c9';
}

#menu_toggle {
  display: none;
}
.global-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,90%);
  overflow-y: scroll;
}
#menu_toggle:checked ~ .global-nav {
  display: block;
}

.nav-list {
  position: relative;
  margin: 0 4rem;
  padding: 0;
  list-style: none;
}
.nav-list li {
  display: block;
  max-width: 100%;
  margin: 5px auto 0;
  -ms-border-radius: 3px;
  border-radius: 3px;
  background: #e8e8e8;
  text-align: center;
}
.nav-list li a,
.nav-list li label {
  display: block;
  padding: .5em;
  text-decoration: none;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.1;
  color: #3a3a3a;
}
.nav-list li a:hover,
.nav-list li label:hover {
  background: #d6d6d6;
  cursor: pointer;
}
.nav-list li.active {
  background: #d6d6d6;
}
.nav-list li.active > a {
  background: transparent;
  cursor: default;
}
.close-menu label:before {
  font-family: "FontAwesome";
  content: '\f00d';
}