当我从一个媒体查询传递到另一个媒体查询时，我的垂直菜单会自动关闭。相反，我不会完全展示它

问题描述 投票：0回答：2

我正在实现一个汉堡菜单（代码中的菜单是本地文件，在代码片段中你不会看到它）并且它工作得很好。我使用 

:checked
伪类和 
checkbox input
元素来模拟点击。 我的问题是，当我从大媒体查询（大屏幕）缩小到小媒体查询（小屏幕）时，我的垂直菜单会自动关闭，而不应该出现。我该如何解决它？

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>

html css drop-down-menu media-queries css-transitions
2个回答
0
投票

问题是768px媒体查询中的这条规则，这导致了事务。

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

然后，要显示导航栏，同时避免相反方向的传输，我的解决方案是更改大媒体查询中的 aboge 规则，如下所示：

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

0
投票
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.