

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

下のように書きました。

[code]

    @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);
      }
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 3.0
2018-02-28T01:56:26.803
42052
2019-04-29T02:35:15.890
2019-04-29T02:35:15.890
76
27403
question
html css twitter-bootstrap
ハンバーガーメニューが開かない


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

[code]

    @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);
      }
    }
    
[/code]

[code]

    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);
      }
    }
[/code]

[code]

    <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>
[/code]

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

[code]

    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);
    
[/code]

[code]

    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);
[/code]

[code]

    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);
      }
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 4.0
2019-04-28T19:35:40.967
54551
2019-04-28T19:35:40.967
32986
42052
answer