Search code examples
htmlcssdrop-down-menumedia-queriescss-transitions

My vertical menu is automatically closed when I pass from a media query to another. Instead I would don't show completely it

I'm realizing an hamburger menu (the menu in the code is a local file and in the snippet you won't see it) and it work great. I'm using the :checked pseudoclass and the checkbox input element to simulate the click. My problem is that when I shrink from the big media query (bigger screens) towards to little media query (little screens) my vertical menu is automatically closed instead it shouldn't appear at all. How could I fix it?

body {
  margin: 1.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 0;
  line-height: 1.3;
  font-size: 1.05em;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

footer,
header,
nav {
  font-family: Tahoma, Geneva, sans-serif;
}

/*#region HEADER*/

.main-header {
  background-color: #f38630;
}

.main-header .inner,
main .main-footer .inner {
  margin: 0 20px;
  padding: 20px;
  color: #fff;
}

.main-header .inner a {
  font-size: 0.8em;
  font-weight: 400;
  color: #fff;
  display: block;
}

nav.pageBody input {
  display: none;
}

nav.pageBody ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: 0.5s;
  transition-timing-function: ease-in-out;
}

nav.pageBody ul li a,
nav.pageBody label {
  display: block;
  color: white;
  cursor: pointer;
  background-color: #69d2e7;
  text-decoration: none;
  padding: 0.5em;
  font-size: 1.1em;
  text-align: center;
  border-bottom: 1px solid white;
}

nav.pageBody ul li a:hover {
  background-color: #17ccf0;
}

nav.pageBody input:checked ~ ul {
  max-height: 100em;
}

nav.pageBody input:checked + label::before {
  content: "Chiudi Menu";
}

nav.pageBody label {
  background-image: url("menu.png");
  background-repeat: no-repeat;
  background-position: left 0.5em top 50%;
  cursor: pointer;
  text-align: right;
  border-right: none;
}

nav.pageBody label::before {
  content: "Apri Menu";
}

nav.pageBody ul li:last-of-type a {
  border-right: none;
}

/*#endregion NAVBAR*/


.pageBody {
  max-width: 1200px;
  margin: 1.2em auto;
  /*     background-color: red;
     border:1px solid black;*/
}

@media only screen and (min-width: 768px) {
  body {
    line-height: 1.4;
    font-size: 1.2em;
  }

  nav.pageBody label {
    display: none;
  }

  nav.pageBody ul {
    max-height: 100em;
  }

  nav.pageBody ul li {
    float: left;
    width: 20%;
  }

  nav.pageBody ul li a {
    border-bottom: none;
    border-right: 1px solid white;
  }

  nav.pageBody ul li:last-of-type a {
    border-right: none;
  }
  
  }
  
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="layoutMobileFirst_barraMenuElastica.css" />
  </head>
  <body>
    <header class="main-header">
      <div class="inner">
        <h2>Header <a href="javascript:(void(0))">Indietro</a></h2>
      </div>
    </header>

    <nav class="pageBody">
      <input type="checkbox" id="hamburger-element" />
      <label for="hamburger-element"></label>
      <ul class="clearfix">
        <!-- <li><a href="#">Menu</a></li> -->
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Corsi</a></li>
        <li><a href="#">Open Day</a></li>
        <li><a href="#">Contatti</a></li>
      </ul>
    </nav>
    </body>
    </html>

Solution

  • The problem is this rule in the 768px media query, this cause the transaction.

    nav.pageBody ul { max-height: 100em; }

    Then, to display the navbar and in the meanwhile avoid the transiction in the opposite direction my solution is to change the aboge rule in the big media query like that:

    nav.pageBody ul { max-height: unset; }