1

ハンバーガーメニューが開きません。

下のように書きました。

@media all and (min-width: 500px) {
  body,
  html {
    margin: 0;
    height: 100%;
  }
  #page-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: black;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 2fr 1fr;
   grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  .nav-unshown {
    display: none;
  }
  .hamburger{
    grid-area: HAMBURGER;
  }
  main {
    grid-area: MAIN;
  }
  header {
    grid-area: HEADER;
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }
  #menu {
    grid-area: MENU;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #menu>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #menu>li:hover>a {
    color: white;
    text-decoration: none;
  }
  #social {
    grid-area: SOCIAL;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #social>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #carousel-container {
    width: 100%;
    height: 100%;
  }
  li {
    list-style: none;
  }
  li a {
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 20px;
  }
  .icon_head {
    padding-right: 10px;
  }
  .carousel {
    height: 100%;
  }
  .carousel-inner {
    height: 100%;
  }
  .carousel-inner>.item {
    height: 100%;
  }
  .carousel-inner>.item>img {
    height: 100%;
  }
  .item {
    position: relative;
  }
  .item p {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 3em;
    top: 20%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
  }
}

@media all and (max-width: 500px) {
  #page-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: white;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }

  header h2 {
   color: white;
   text-align: center;
   font-size: 20px;
   margin-top: 3px;
   margin-bottom: 10px;
  }
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  #nav-open span,
  #nav-open span:before,
  #nav-open span:after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 330px;
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  #nav-input:checked~#nav-close {
    display: block;
    opacity: .5;
  }
  #nav-input:checked~#nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  }
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="home.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <title>Home</title>
</head>

<body>
  <div id="page-container">
    <nav class="menu">
      <header>
        <h1>WEB SITE</h1>
      </header>
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <ul class="sidebar-ul" id="menu">
          <li>
            <a class="home" href="home.html">Home</a>
          </li>
          <li>
            <a class="profile" href="profile.html">Profile</a>
          </li>
        </ul>
      </div>
      <ul id="social">
        <li>
          <a class="contact" href="">
            <i class="icon_head" aria-hidden="true"></i>Email</a>
        </li>
        <li>
          <a class="contact" href="">
            <i class="icon_head" aria-hidden="true"></i>Facebook</a>
        </li>
      </ul>
    </nav>
    <main>
      <div id="carousel-container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img class="img-responsive" src="test1.jpg" alt="Arch">
              <p>WELCOME</p>
            </div>

            <div class="item contain">
              <img class="img-responsive" src="test2.jpg" alt="Nature">
              <p>MY SITE</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

ブラウザの幅が500px以下の時にハンバーガーメニューが開くように意図して作ったはずなのですが、500px以下の時もハンバーガーメニューが開きません。https://saruwakakun.com/html-css/reference/nav-drawer のサイトを参考にして作ったのですが。また、ハンバーガーメニューの中に <ul id="social"> の中身も入るようにしたいのに、今はその中身がハンバーガーメニューに入っていません。どのように修正すれば良いのでしょうか?

1 件の回答 1

2

チェックボックスにチェックが付いていない状態で、画面幅が 500px 以下のときにハンバーガーメニューを表示させたい、ということであれば、 :not 擬似クラスを用いてハンバーガーメニューが表示される条件を変更すれば良いと思います。

@media all and (max-width: 500px) {
  #nav-input:not(:checked) ~ #nav-close {
    display: block;
    opacity: 0.5;
  }
  #nav-input:not(:checked) ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  }
}

header {
  background: #111!important;
}

@media all and (min-width: 500px) {
  body,
  html {
    margin: 0;
    height: 100%;
  }
  #page-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: black;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 2fr 1fr;
    : "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  .nav-unshown {
    display: none;
  }
  .hamburger {
    grid-area: HAMBURGER;
  }
  main {
    grid-area: MAIN;
  }
  header {
    grid-area: HEADER;
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }
  #menu {
    grid-area: MENU;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #menu>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #menu>li:hover>a {
    color: white;
    text-decoration: none;
  }
  #social {
    grid-area: SOCIAL;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #social>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #carousel-container {
    width: 100%;
    height: 100%;
  }
  li {
    list-style: none;
  }
  li a {
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 20px;
  }
  .icon_head {
    padding-right: 10px;
  }
  .carousel {
    height: 100%;
  }
  .carousel-inner {
    height: 100%;
  }
  .carousel-inner>.item {
    height: 100%;
  }
  .carousel-inner>.item>img {
    height: 100%;
  }
  .item {
    position: relative;
  }
  .item p {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 3em;
    top: 20%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
  }
}

@media all and (max-width: 500px) {
  #page-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: white;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }
  header h2 {
    color: white;
    text-align: center;
    font-size: 20px;
    margin-top: 3px;
    margin-bottom: 10px;
  }
  .nav-unshown {
    display: none;
  }
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  #nav-open span,
  #nav-open span:before,
  #nav-open span:after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #555;
    display: block;
    content: "";
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: 0.3s ease-in-out;
  }
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 330px;
    height: 100%;
    background: #fff;
    transition: 0.3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  #nav-input:not(:checked)~#nav-close {
    display: block;
    opacity: 0.5;
  }
  #nav-input:not(:checked)~#nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  }
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="home.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <title>Home</title>
</head>

<body>
  <div id="page-container">
    <nav class="menu">
      <header>
        <h1>WEB SITE</h1>
      </header>
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <ul class="sidebar-ul" id="menu">
          <li>
            <a class="home" href="home.html">Home</a>
          </li>
          <li>
            <a class="profile" href="profile.html">Profile</a>
          </li>
        </ul>
        <ul id="social">
          <li>
            <a class="contact" href="">
              <i class="icon_head" aria-hidden="true"></i>Email</a>
          </li>
          <li>
            <a class="contact" href="">
              <i class="icon_head" aria-hidden="true"></i>Facebook</a>
          </li>
        </ul>
      </div>

    </nav>
    <main>
      <div id="carousel-container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img class="img-responsive" src="test1.jpg" alt="Arch">
              <p>WELCOME</p>
            </div>

            <div class="item contain">
              <img class="img-responsive" src="test2.jpg" alt="Nature">
              <p>MY SITE</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

もしチェックボックスの値に関わらず、 500px 以下の画面幅のときにハンバーガーメニューを表示された状態にしたいのであれば、 JavaScript を使う必要があります。

let flag = false;

window.addEventListener("resize", () => {
  const documentWidth = document.documentElement.getBoundingClientRect().width;
  const checkBox = document.getElementById("nav-input");
  if (flag === true) {
    if (documentWidth > 500) flag = false;
    return;
  }

  checkBox.checked = flag = true;
}, false);

document.addEventListener("DOMContentLoaded", () => {
  const e = document.createEvent("HTMLEvents");
  e.initEvent("resize", true, true);
  window.dispatchEvent(e);
}, false);

let flag = false;
window.addEventListener("resize", () => {
  const documentWidth = document.documentElement.getBoundingClientRect().width;
  const checkBox = document.getElementById("nav-input");
  if (flag === true) {
    if (documentWidth > 500) flag = false;
    return;
  }

  checkBox.checked = flag = true;
}, false);

document.addEventListener("DOMContentLoaded", () => {
  const e = document.createEvent("HTMLEvents");
  e.initEvent("resize", true, true);
  window.dispatchEvent(e);
}, false);
header {
  background: #111!important;
}

@media all and (min-width: 500px) {
  body,
  html {
    margin: 0;
    height: 100%;
  }
  #page-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: black;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 2fr 1fr;
    : "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  .nav-unshown {
    display: none;
  }
  .hamburger {
    grid-area: HAMBURGER;
  }
  main {
    grid-area: MAIN;
  }
  header {
    grid-area: HEADER;
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }
  #menu {
    grid-area: MENU;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #menu>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #menu>li:hover>a {
    color: white;
    text-decoration: none;
  }
  #social {
    grid-area: SOCIAL;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0px;
  }
  #social>li {
    margin: 10px 10px;
    padding: 2px 0px;
  }
  #carousel-container {
    width: 100%;
    height: 100%;
  }
  li {
    list-style: none;
  }
  li a {
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 20px;
  }
  .icon_head {
    padding-right: 10px;
  }
  .carousel {
    height: 100%;
  }
  .carousel-inner {
    height: 100%;
  }
  .carousel-inner>.item {
    height: 100%;
  }
  .carousel-inner>.item>img {
    height: 100%;
  }
  .item {
    position: relative;
  }
  .item p {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 3em;
    top: 20%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
  }
}

@media all and (max-width: 500px) {
  #page-container {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "NAV MAIN";
    height: 100%;
  }
  nav {
    grid-area: NAV;
    background-color: white;
    height: 100%;
    float: left;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  header h1 {
    color: white;
    text-align: center;
    font-size: 30px;
  }
  header h2 {
    color: white;
    text-align: center;
    font-size: 20px;
    margin-top: 3px;
    margin-bottom: 10px;
  }
  .nav-unshown {
    display: none;
  }
  #nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  #nav-open span,
  #nav-open span:before,
  #nav-open span:after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #555;
    display: block;
    content: "";
    cursor: pointer;
  }
  #nav-open span:before {
    bottom: -8px;
  }
  #nav-open span:after {
    bottom: -16px;
  }
  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: 0.3s ease-in-out;
  }
  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 330px;
    height: 100%;
    background: #fff;
    transition: 0.3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  #nav-input:checked~#nav-close {
    display: block;
    opacity: 0.5;
  }
  #nav-input:checked~#nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  }
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="home.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <title>Home</title>
</head>

<body>
  <div id="page-container">
    <nav class="menu">
      <header>
        <h1>WEB SITE</h1>
      </header>
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <ul class="sidebar-ul" id="menu">
          <li>
            <a class="home" href="home.html">Home</a>
          </li>
          <li>
            <a class="profile" href="profile.html">Profile</a>
          </li>
        </ul>
        <ul id="social">
          <li>
            <a class="contact" href="">
              <i class="icon_head" aria-hidden="true"></i>Email</a>
          </li>
          <li>
            <a class="contact" href="">
              <i class="icon_head" aria-hidden="true"></i>Facebook</a>
          </li>
        </ul>
      </div>

    </nav>
    <main>
      <div id="carousel-container">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item active">
              <img class="img-responsive" src="test1.jpg" alt="Arch">
              <p>WELCOME</p>
            </div>

            <div class="item contain">
              <img class="img-responsive" src="test2.jpg" alt="Nature">
              <p>MY SITE</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

また、ハンバーガーメニューの中にsocialクラスを付与したul要素が入っていない原因は、ハンバーガーメニューである#nav-contentが付与された要素の中に、socialクラスを付与した要素が含まれていないためです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。