下拉移动菜单未推送内容

时间：2018-09-29 18:28:38

标签： html css sass

我希望我的移动菜单将其下方的内容下推。这里的内容是页脚。我在这儿做错什么了？

1 个答案:

答案 0 :(得分：2)

这里的问题是规则grid-template-rows: 40px auto 40px;的最大宽度：840px可以与header {display: none; }一起使用。

使用这2条规则，当您的最大宽度为840px时，您的第一行将成为.menu，并将其高度设置为40px。

这是我所说的一个例子。我创建了4行，将display:none放在第一行：您会看到第二行采用第一行的规则。

#grid{
 display: grid;
 grid-template-rows: 20px 100px 40px 100px;
}
.a_1{
  background-color:yellow;
  display:none;
}
.a_2{
  background-color:orange;
}
.a_3{
  background-color:blue;
}
.a_4{
  background-color:red;
}
<div id="grid">
  <div class="a_1"></div>
  <div class="a_2">I'm the second row but I'm height only 20px</div>
  <div class="a_3"></div>
  <div class="a_4"></div>
</div>

因此，解决方案可能有所不同：删除grid-template-rows规则（也删除网格行：-1；在页脚中），或者在最大宽度为840px时更改该规则。这取决于您的布局以及您需要做什么。

我将举例说明更改规则grid-template-rows，并添加：

@media (max-width: 840px) {
  .wrapper{
    grid-template-rows: auto 40px;
  }
}


    const triggerButton = document.getElementById('triggerButton');
    triggerButton.addEventListener('click', () => {
        const x = document.getElementById("menu");
        if (x.className === "menu") {
            x.className += " responsive";
        } else {
            x.className = "menu";
        }
    })
@import url("https://fonts.googleapis.com/css?family=Poppins");
/*Media queries*/
body {
  margin: 0px; }

/* container */
.wrapper {
  display: grid;
  grid-template-columns: repeat(autofit, 1fr);
  grid-template-rows: 40px auto 40px; }

/* header */
header {
  grid-column: 1 /-1;
  background-color: #0966A7;
  color: #f8f6f6;
  font: 400 14px 'Poppins', sans-serif;
  display: grid;
  grid-template: 1fr auto 1fr; }
  header div.left-header {
    grid-column: 1/2; }
  header div.right-header {
    grid-column: 6/6;
    justify-self: end; }
  header div > ul {
    list-style: none;
    margin: 8px; }
    header div > ul li {
      margin-left: 20px;
      display: inline-block; }
      header div > ul li a {
        text-decoration: none;
        color: white; }
        header div > ul li a i {
          background-color: #309071;
          border-radius: 50%;
          padding: 5px; }
  @media (max-width: 840px) {
    header {
      display: none; } }

/* Menu */
.menu {
  grid-column: 1/-1;
  justify-self: center;
  font: 400 14px 'Poppins', sans-serif; }
  .menu a {
    float: left;
    display: block;
    color: #222121;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px; }
  .menu a:not(:first-child) {
    margin-top: 20px; }
  .menu .icon {
    display: none; }
  .menu .menu-brand > img {
    max-width: 120px;
    padding: 0px;
    vertical-align: middle; }
  .menu .dropdown {
    float: left;
    overflow: hidden; }
  .menu .dropdown .dropbtn {
    border: none;
    outline: none;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin-top: 21px; }
  .menu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #0966A7;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1; }
  .menu .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 0; }
  .menu a:not(:first-child):hover {
    background-color: #309071;
    color: black; }
  .menu .dropdown .dropbtn:hover {
    background-color: #309071; }
  .menu .dropdown-content a:hover {
    background-color: #309071;
    color: black; }
  .menu .dropdown:hover .dropdown-content {
    display: block; }
  @media (max-width: 840px) {
    .menu {
      justify-self: auto; }
      .menu a:not(:first-child), .menu .dropdown .dropbtn {
        display: none;
        margin: 0; }
      .menu a.icon {
        margin: 21px;
        float: right;
        display: block; } }

@media (max-width: 840px) {
  
  .wrapper{
    grid-template-rows: auto 40px;
  }
  .menu.responsive {
    position: relative; }
    .menu.responsive .icon {
      position: absolute;
      right: 0;
      top: 0; }
    .menu.responsive a {
      float: none;
      display: block;
      text-align: left;
      position: relative; }
    .menu.responsive .dropdown {
      float: none; }
    .menu.responsive .dropdown-content {
      position: relative; }
    .menu.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left; } }

footer {
  grid-row: -1;
  background-color: blue; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
	 crossorigin="anonymous">
<div class="wrapper">
		<header>
			<div class="left-header">
				<ul>
					<li>Call: 272 727 2727</li>
					<li>info@kolorscopy.com</li>
				</ul>
			</div>
			<div class="right-header">
				<ul>
					<li><a href="#">Branches</a></li>
					<li><a href="#">Careers</a></li>
					<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
					<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
					<li><a href="#"><i class="fab fa-youtube-square"></i></a></li>

				</ul>
			</div>
		</header>

		<div class="menu" id="menu">
			<a href="/" class="menu-brand"><img src="images/kolors-logo.png" alt=""></a>
			<a href="/">Home</a>
			<div class="dropdown">
				<button class="dropbtn">About
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/about-kolors">About Kolors</a>
					<a href="/vision-and-mission">Vision & Mission</a>
					<a href="/before-and-after">Before & After</a>
					<a href="/video-gallery">Video Gallery</a>
					<a href="/reviews">Reviews</a>
					<a href="/testimonials">Testimonials</a>
					<a href="/how-it-works">How it works</a>
				</div>
			</div>
			<div class="dropdown">
				<button class="dropbtn">Slimming
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/weight-loss-programs">Weight Loss</a>
					<a href="/inch-loss-treatment">Inch Loss</a>
					<a href="/figure-correction-body-sculpting">Figure Correction</a>
					<a href="/body-alignment-beauty-therapy">Body Therapy</a>
					<a href="/body-toning-treatment">Body Toning</a>
					<a href="/liposculpting-lipo-gel">Lip Gel</a>
					<a href="/cool-sculpting">Cool Sculpting</a>
					<a href="/bmi-calculator">BMI Calculator</a>
					<a href="/how-it-works">How it works</a>
				</div>
			</div>
			<div class="dropdown">
				<button class="dropbtn">Skin
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/skin-care-treatment-clinic">Skin Clinic</a>
					<a href="/skin-fairness-treatment">Fairness Treatment</a>
					<a href="/anti-aging-skin-treatment">Anti Aging Treatment</a>
					<a href="/deep-scar-removal">Deep Scar Removal</a>
					<a href="/laser-treatment-for-hair-removal">Laser Hair Removal Treatment</a>
					<a href="/skin-polishing-treatment">Skin Polishing</a>
					<a href="/mole-and-natural-warts-removal">Mole & Warts Removal</a>
					<a href="/under-eye-dark-circles-treatment">Under Eye Dark Circles</a>
					<a href="/best-wrinkle-treatment">Wrinkle Treatment</a>
					<a href="/best-natural-acne-treatment">Acne Treatment</a>
					<a href="/best-dark-spot-removal-treatment">Dark Spot Treatment</a>
				</div>
			</div>
			<div class="dropdown">
				<button class="dropbtn">Hair
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/hair-transplantation">Hair Transplantation</a>
					<a href="/hair-re-growth">Hair Re-Growth</a>
					<a href="/hair-strengthening-treatment">Hair Strengthening</a>
					<a href="/best-anti-dandruff-treatment">Anti Dandruff</a>
					<a href="/anti-hairfall-treatment">Anti Hairfall Treatment</a>
					<a href="/prp-treatment">PRP Hairloss Treatment</a>
				</div>
			</div>
			<a href="#">Academy</a>
			<a href="#">Products</a>
			<a href="#">Franchise</a>
			<a href="#">Contact</a>
			<a href="javascript:void(0);" class="icon" id="triggerButton">
				<i class="fa fa-bars"></i>
			</a>
		</div>



		<!--{{# each navLinks}}
	<li {{#ifeq ../section key}} class="active" {{else}} {{/ifeq}}>
		<a href="{{ href }}">{{ label }}</a>
	</li>
	{{/each}}-->

		<footer>
			footer
		</footer>
		<!-- Compiled and minified JavaScript -->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	</div>

...并删除该规则（也删除网格行：-1；就像我之前所说的在页脚中）

  const triggerButton = document.getElementById('triggerButton');
    triggerButton.addEventListener('click', () => {
        const x = document.getElementById("menu");
        if (x.className === "menu") {
            x.className += " responsive";
        } else {
            x.className = "menu";
        }
    })
@import url("https://fonts.googleapis.com/css?family=Poppins");
/*Media queries*/
body {
  margin: 0px; }

/* container */
.wrapper {
  display: grid;
  grid-template-columns: repeat(autofit, 1fr);
   }

/* header */
header {
  grid-column: 1 /-1;
  background-color: #0966A7;
  color: #f8f6f6;
  font: 400 14px 'Poppins', sans-serif;
  display: grid;
  grid-template: 1fr auto 1fr; }
  header div.left-header {
    grid-column: 1/2; }
  header div.right-header {
    grid-column: 6/6;
    justify-self: end; }
  header div > ul {
    list-style: none;
    margin: 8px; }
    header div > ul li {
      margin-left: 20px;
      display: inline-block; }
      header div > ul li a {
        text-decoration: none;
        color: white; }
        header div > ul li a i {
          background-color: #309071;
          border-radius: 50%;
          padding: 5px; }
  @media (max-width: 840px) {
    header {
      display: none; } }

/* Menu */
.menu {
  grid-column: 1/-1;
  justify-self: center;
  font: 400 14px 'Poppins', sans-serif; }
  .menu a {
    float: left;
    display: block;
    color: #222121;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px; }
  .menu a:not(:first-child) {
    margin-top: 20px; }
  .menu .icon {
    display: none; }
  .menu .menu-brand > img {
    max-width: 120px;
    padding: 0px;
    vertical-align: middle; }
  .menu .dropdown {
    float: left;
    overflow: hidden; }
  .menu .dropdown .dropbtn {
    border: none;
    outline: none;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin-top: 21px; }
  .menu .dropdown-content {
    display: none;
    position: absolute;
    background-color: #0966A7;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1; }
  .menu .dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 0; }
  .menu a:not(:first-child):hover {
    background-color: #309071;
    color: black; }
  .menu .dropdown .dropbtn:hover {
    background-color: #309071; }
  .menu .dropdown-content a:hover {
    background-color: #309071;
    color: black; }
  .menu .dropdown:hover .dropdown-content {
    display: block; }
  @media (max-width: 840px) {
    .menu {
      justify-self: auto; }
      .menu a:not(:first-child), .menu .dropdown .dropbtn {
        display: none;
        margin: 0; }
      .menu a.icon {
        margin: 21px;
        float: right;
        display: block; } }

@media (max-width: 840px) {
  
  .menu.responsive {
    position: relative; }
    .menu.responsive .icon {
      position: absolute;
      right: 0;
      top: 0; }
    .menu.responsive a {
      float: none;
      display: block;
      text-align: left;
      position: relative; }
    .menu.responsive .dropdown {
      float: none; }
    .menu.responsive .dropdown-content {
      position: relative; }
    .menu.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left; } }

footer {
  background-color: blue; }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
	 crossorigin="anonymous">

<div class="wrapper">
		<header>
			<div class="left-header">
				<ul>
					<li>Call: 272 727 2727</li>
					<li>info@kolorscopy.com</li>
				</ul>
			</div>
			<div class="right-header">
				<ul>
					<li><a href="#">Branches</a></li>
					<li><a href="#">Careers</a></li>
					<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
					<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
					<li><a href="#"><i class="fab fa-youtube-square"></i></a></li>

				</ul>
			</div>
		</header>

		<div class="menu" id="menu">
			<a href="/" class="menu-brand"><img src="images/kolors-logo.png" alt=""></a>
			<a href="/">Home</a>
			<div class="dropdown">
				<button class="dropbtn">About
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/about-kolors">About Kolors</a>
					<a href="/vision-and-mission">Vision & Mission</a>
					<a href="/before-and-after">Before & After</a>
					<a href="/video-gallery">Video Gallery</a>
					<a href="/reviews">Reviews</a>
					<a href="/testimonials">Testimonials</a>
					<a href="/how-it-works">How it works</a>
				</div>
			</div>
			<div class="dropdown">
				<button class="dropbtn">Slimming
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/weight-loss-programs">Weight Loss</a>
					<a href="/inch-loss-treatment">Inch Loss</a>
					<a href="/figure-correction-body-sculpting">Figure Correction</a>
					<a href="/body-alignment-beauty-therapy">Body Therapy</a>
					<a href="/body-toning-treatment">Body Toning</a>
					<a href="/liposculpting-lipo-gel">Lip Gel</a>
					<a href="/cool-sculpting">Cool Sculpting</a>
					<a href="/bmi-calculator">BMI Calculator</a>
					<a href="/how-it-works">How it works</a>
				</div>
			</div>
			<div class="dropdown">
				<button class="dropbtn">Skin
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/skin-care-treatment-clinic">Skin Clinic</a>
					<a href="/skin-fairness-treatment">Fairness Treatment</a>
					<a href="/anti-aging-skin-treatment">Anti Aging Treatment</a>
					<a href="/deep-scar-removal">Deep Scar Removal</a>
					<a href="/laser-treatment-for-hair-removal">Laser Hair Removal Treatment</a>
					<a href="/skin-polishing-treatment">Skin Polishing</a>
					<a href="/mole-and-natural-warts-removal">Mole & Warts Removal</a>
					<a href="/under-eye-dark-circles-treatment">Under Eye Dark Circles</a>
					<a href="/best-wrinkle-treatment">Wrinkle Treatment</a>
					<a href="/best-natural-acne-treatment">Acne Treatment</a>
					<a href="/best-dark-spot-removal-treatment">Dark Spot Treatment</a>
				</div>
			</div>
			<div class="dropdown">
				<button class="dropbtn">Hair
					<i class="fa fa-caret-down"></i>
				</button>
				<div class="dropdown-content">
					<a href="/hair-transplantation">Hair Transplantation</a>
					<a href="/hair-re-growth">Hair Re-Growth</a>
					<a href="/hair-strengthening-treatment">Hair Strengthening</a>
					<a href="/best-anti-dandruff-treatment">Anti Dandruff</a>
					<a href="/anti-hairfall-treatment">Anti Hairfall Treatment</a>
					<a href="/prp-treatment">PRP Hairloss Treatment</a>
				</div>
			</div>
			<a href="#">Academy</a>
			<a href="#">Products</a>
			<a href="#">Franchise</a>
			<a href="#">Contact</a>
			<a href="javascript:void(0);" class="icon" id="triggerButton">
				<i class="fa fa-bars"></i>
			</a>
		</div>



		<!--{{# each navLinks}}
	<li {{#ifeq ../section key}} class="active" {{else}} {{/ifeq}}>
		<a href="{{ href }}">{{ label }}</a>
	</li>
	{{/each}}-->

		<footer>
			footer
		</footer>
		<!-- Compiled and minified JavaScript -->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script src="/js/main.js"></script>


	</div>

相关问题
最新问题