菜单在封面下消失了

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

我的菜单在Dekstop模式下消失了，而在手机模式下它显示正确，我不明白是什么问题。我试着观察“捕获”框是否覆盖了盒子菜单，但我无法弄清楚如何继续。

我有一个问题，我现在无法解决6个小时

我现在有6个小时这个问题，我无法解决它非常感谢你的帮助。

$(".header__icon-bar").click(function(e){

        $(".header__menu").toggleClass('is-open');
        e.preventDefault();

      });
html,body{height: 100%;}
body{background: #eee;}


/*---------------------------
general
---------------------------*/


.animate{
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none; }

.p{line-height: 22px}
/*---------------------------
header
---------------------------*/


.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}

.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}

/*---------------------------
Cover
---------------------------*/


.cover{height:70%;
  background-image: url(https://source.unsplash.com/category/technology);
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center center;
  position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}


/*---------------------------
Cards
---------------------------*/

.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}

/*---------------------------
Tablet
---------------------------*/
@media (max-width: 998px){


}

/*---------------------------
Smartphone
---------------------------*/
@media (max-width: 767px){

header{position:fixed; z-index: 100; width: 100%}
.header__icon-bar{display: block;}

.header__menu{width: 100%;height:0px; overflow: hidden;}
.header__menu__item{display: block;}
.is-open{height:300px; overflow: auto;}

/*Cover*/
.cover{height:100%;}

/*Cards*/
.card{width:90%; margin:5%;

}





.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
    <link rel="stylesheet" href="style.css">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>

    <header class="header clearfix">
      <a href="" class="header__logo">Logo</a>
      <a href="" class="header__icon-bar">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <ul class="header__menu animate">
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
      </ul>
    </header>
    <section class="cover">
      <div class="cover__filter"></div>
      <div class="cover__caption">
        <div class="cover__caption__copy">
          <h1>Primary message of the home</h1>
          <h2>Subtitle of the home page</h2>
          <a href="" class="button">Call to action</a>
        </div>
      </div>
    </section>


    <section class="cards clearfix">
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/nature/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/food/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/people/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>
html css
2个回答
2
投票

希望这有效

$(".header__icon-bar").click(function(e){

        $(".header__menu").toggleClass('is-open');
        e.preventDefault();

      });
html,body{height: 100%;}
body{background: #eee;}


/*---------------------------
general
---------------------------*/


.animate{
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none; }

.p{line-height: 22px}
/*---------------------------
header
---------------------------*/


.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}

.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}

/*---------------------------
Cover
---------------------------*/


.cover{height:70%;
  background-image: url(https://source.unsplash.com/category/technology);
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center center;
  position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}


/*---------------------------
Cards
---------------------------*/

.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}

/*---------------------------
Tablet
---------------------------*/
@media (max-width: 998px){


}

/*---------------------------
Smartphone
---------------------------*/
@media (max-width: 767px){

header{position:fixed; z-index: 100; width: 100%}
.header__icon-bar{display: block;}

.header__menu{width: 100%;height:0px; overflow: hidden;}
.header__menu__item{display: block;}
.is-open{height:300px; overflow: auto;}

/*Cover*/
.cover{height:100%;}

/*Cards*/
.card{width:90%; margin:5%;}

}





.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
    <link rel="stylesheet" href="style.css">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>

    <header class="header clearfix">
      <a href="" class="header__logo">Logo</a>
      <a href="" class="header__icon-bar">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <ul class="header__menu animate">
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
      </ul>
    </header>
    <section class="cover">
      <div class="cover__filter"></div>
      <div class="cover__caption">
        <div class="cover__caption__copy">
          <h1>Primary message of the home</h1>
          <h2>Subtitle of the home page</h2>
          <a href="" class="button">Call to action</a>
        </div>
      </div>
    </section>


    <section class="cards clearfix">
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/nature/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/food/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/people/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>
3
投票

那么在查看代码时，您忘记关闭@media查询。

所以我认为你需要添加一个}：

.card { width:90%, margin:5%
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.