Hamburger menu doesn't open

The hamburger menu won't open.

I wrote it as below.

@media all and (min-width:500px){
  body,
  US>html{
    margin:0;
    height —100%;
  }
  # page-container {
    display:grid;
    grid-template-columns:1fr3fr;
    grid-template-areas: "NAV MAIN";
    height —100%;
  }
  nav{
    grid-area:NAV;
    background-color:black;
    height —100%;
    float:left;
    display:grid;
    grid-template-rows:1fr1fr2fr2fr1fr;
　  grid-template-areas: "HAMBURGER" "HEADER" "MENU" "SOCIAL";
  }
  .nav-unshown{
    display: none;
  }
  US>.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 —10px10px;
    padding —2px0px;
  }
  # 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 —10px10px;
    padding —2px0px;
  }
  # carousel-container {
    width: 100%;
    height —100%;
  }
  li{
    list-style: none;
  }
  lia{
    display:block;
    text-decoration: none;
    color:white;
    text-align:center;
    font-size: 20px;
  }
  .icon_head{
    padding-right —10px;
  }
  US>.carousel{
    height —100%;
  }
  .carousel-inner{
    height —100%;
  }
  .carousel-inner>.item{
    height —100%;
  }
  .carousel-inner>.item>img{
    height —100%;
  }
  .item{
    position:relative;
  }
  .itemp{
    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:1fr4fr;
    grid-template-areas: "NAV MAIN";
    height —100%;
  }
  nav{
    grid-area:NAV;
    background-color:white;
    height —100%;
    float:left;
    display:grid;
    grid-template-rows:1fr1fr1fr1fr;
    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: .3ase-in-out;
  }
  # nav-content {
    overflow —auto;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width —90%;
    max-width : 330px;
    height —100%;
    background: #ffff;
    transition: .3ase-in-out;
    - webkit-transform:translateX (-105%);
    transform —translateX (-105%);
  }
  #nav-input:checked through #nav-close{
    display:block;
    opacity:.5;
  }
  #nav-input:checked through #nav-content{
    -webkit-transform:translateX (0%);
    transform —translateX (0%);
    box-shadow —6px025px rgba(0,0,0, .15);
  }
}

<head>
  <metacharset="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>
  <divid="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 class="nav-unshown" id="nav-close" for="nav-input"></label>
      <divid="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>
      <ulid="social">
        <li>
          <a class="contact" href="">
            <ic class="icon_head" aria-hidden="true">/i>Email</a>
        </li>
        <li>
          <a class="contact" href="">
            <ic class="icon_head" area-hidden="true">/i>Facebook</a>
        </li>
      </ul>
    </nav>
    <main>
      <divid="carousel-container">
        <divid="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>

I made it with the intention of opening the hamburger menu when the browser width is less than 500px, but the hamburger menu does not open when the browser width is less than 500px.I created it by referring to the https://saruwakakun.com/html-css/reference/nav-drawer site.Also, I would like to include the contents of <ulid="social"> in the hamburger menu, but now the contents are not in the hamburger menu.How should I fix it?

html css twitter-bootstrap

2022-09-30 15:44

1 Answers

If you want the hamburger menu to be displayed when the screen width is 500px or less without a check box, you can use the :not pseudo class to change the conditions under which the hamburger menu appears.

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

header{
  background: #111!important;
}

@media all and (min-width:500px) {
  body,
  US>html{
    margin:0;
    height —100%;
  }
  # page-container {
    display:grid;
    grid-template-columns:1fr3fr;
    grid-template-areas: "NAV MAIN";
    height —100%;
  }
  nav{
    grid-area:NAV;
    background-color:black;
    height —100%;
    float:left;
    display:grid;
    grid-template-rows:1fr1fr2fr2fr1fr;
    : "HAMBURGER", "HEADER", "MENU", "SOCIAL";
  }
  .nav-unshown{
    display: none;
  }
  US>.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 —10px10px;
    padding —2px0px;
  }
  # 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 —10px10px;
    padding —2px0px;
  }
  # carousel-container {
    width: 100%;
    height —100%;
  }
  li{
    list-style: none;
  }
  lia{
    display:block;
    text-decoration: none;
    color:white;
    text-align:center;
    font-size: 20px;
  }
  .icon_head{
    padding-right —10px;
  }
  US>.carousel{
    height —100%;
  }
  .carousel-inner{
    height —100%;
  }
  .carousel-inner>.item{
    height —100%;
  }
  .carousel-inner>.item>img{
    height —100%;
  }
  .item{
    position:relative;
  }
  .itemp{
    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:1fr4fr;
    grid-template-areas: "NAV MAIN";
    height —100%;
  }
  nav{
    grid-area:NAV;
    background-color:white;
    height —100%;
    float:left;
    display:grid;
    grid-template-rows:1fr1fr1fr1fr;
    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.3ase-in-out;
  }
  # nav-content {
    overflow —auto;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width —90%;
    max-width : 330px;
    height —100%;
    background: #ffff;
    transition —0.3ase-in-out;
    - webkit-transform:translateX (-105%);
    transform —translateX (-105%);
  }
  #nav-input:not(:checked) through #nav-close{
    display:block;
    opacity —0.5;
  }
  #nav-input:not(:checked) through #nav-content{
    -webkit-transform:translateX (0%);
    transform —translateX (0%);
    box-shadow —6px025pxrgba(0,0,0,0.15);
  }
}

<head>
  <metacharset="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>
  <divid="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 class="nav-unshown" id="nav-close" for="nav-input"></label>
      <divid="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>
        <ulid="social">
          <li>
            <a class="contact" href="">
              <ic class="icon_head" aria-hidden="true">/i>Email</a>
          </li>
          <li>
            <a class="contact" href="">
              <ic class="icon_head" area-hidden="true">/i>Facebook</a>
          </li>
        </ul>
      </div>

    </nav>
    <main>
      <divid="carousel-container">
        <divid="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>

Regardless of the check box value, if you want the hamburger menu to be displayed when the screen width is 500px or less, you need to use JavaScript.

let flag=false;

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

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

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

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

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

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

header{
  background: #111!important;
}

@media all and (min-width:500px) {
  body,
  US>html{
    margin:0;
    height —100%;
  }
  # page-container {
    display:grid;
    grid-template-columns:1fr3fr;
    grid-template-areas: "NAV MAIN";
    height —100%;
  }
  nav{
    grid-area:NAV;
    background-color:black;
    height —100%;
    float:left;
    display:grid;
    grid-template-rows:1fr1fr2fr2fr1fr;
    : "HAMBURGER", "HEADER", "MENU", "SOCIAL";
  }
  .nav-unshown{
    display: none;
  }
  US>.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 —10px10px;
    padding —2px0px;
  }
  # 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 —10px10px;
    padding —2px0px;
  }
  # carousel-container {
    width: 100%;
    height —100%;
  }
  li{
    list-style: none;
  }
  lia{
    display:block;
    text-decoration: none;
    color:white;
    text-align:center;
    font-size: 20px;
  }
  .icon_head{
    padding-right —10px;
  }
  US>.carousel{
    height —100%;
  }
  .carousel-inner{
    height —100%;
  }
  .carousel-inner>.item{
    height —100%;
  }
  .carousel-inner>.item>img{
    height —100%;
  }
  .item{
    position:relative;
  }
  .itemp{
    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:1fr4fr;
    grid-template-areas: "NAV MAIN";
    height —100%;
  }
  nav{
    grid-area:NAV;
    background-color:white;
    height —100%;
    float:left;
    display:grid;
    grid-template-rows:1fr1fr1fr1fr;
    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.3ase-in-out;
  }
  # nav-content {
    overflow —auto;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width —90%;
    max-width : 330px;
    height —100%;
    background: #ffff;
    transition —0.3ase-in-out;
    - webkit-transform:translateX (-105%);
    transform —translateX (-105%);
  }
  #nav-input:checked through #nav-close{
    display:block;
    opacity —0.5;
  }
  #nav-input:checked through #nav-content{
    -webkit-transform:translateX (0%);
    transform —translateX (0%);
    box-shadow —6px025pxrgba(0,0,0,0.15);
  }
}

<head>
  <metacharset="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>
  <divid="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 class="nav-unshown" id="nav-close" for="nav-input"></label>
      <divid="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>
        <ulid="social">
          <li>
            <a class="contact" href="">
              <ic class="icon_head" aria-hidden="true">/i>Email</a>
          </li>
          <li>
            <a class="contact" href="">
              <ic class="icon_head" area-hidden="true">/i>Facebook</a>
          </li>
        </ul>
      </div>

    </nav>
    <main>
      <divid="carousel-container">
        <divid="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>

Also, the hamburger menu does not contain the ul element with the social class because the hamburger menu #nav-content element does not contain the social class.

2022-09-30 15:44

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656