时间戳

首页 > 解决方案 > 下拉菜单不移动内容

javascript - 下拉菜单不移动内容

问题描述

所以基本上当我使用我的下拉菜单将我的内容移动到下拉菜单下方时，我有点需要我的标题，因为它就在它上面并且有点碍事。

所以我想问问你对我应该怎么做才能把它移到我的下拉菜单下面的意见，因为它看起来不像这样，而且它并不像这样真的合适

* {
  text-decoration: none;
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
}

.logo {
  float: left;
}

.nav {
  text-align: right;
  height: 100px;
  line-height: 100px;
  flex: 10;
}

.menu {
  margin: 0 30px 0 0;
  margin-top: 10px;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 70px;
  font-size: 20px;
  margin-top: 10px;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
  margin-top: 10px;
}

#toggle {
  display: none;
}

.icons {
  display: flex;
  float: right;
}

h3,
h4,
h2 {
  font-family: 'Roboto', sans-serif;
}

section {
  text-align: center;
  align-items: center;
  align-self: center;
  align-content: center;
}

@media only screen and (max-width:820px) {
  .logo {
    width: 1%;
  }
  label {
    display: block;
    cursor: pointer;
    margin-top: 10px;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    background-color: white;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
  .icons {
    display: inline-block;
    width: 100%;
  }
}

@media only screen and (max-width:250px) {
  * {
    visibility: hidden;
  }
}
<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="logo.png" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <title>Something</title>
</head>

<body>
  <header>
    <a class="logo" href="something"><img src="logo.png" alt="logo"></a>

    <div class="nav">

      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle">


      <div class="menu">
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <a href="something.html">Something</a>
        <div class="icons">
          <a href="https://www.facebook.com/something/"> <i class="fab fa-facebook"></i></a>
          <a href="tel:+somenumber"> <i class="fas fa-phone"></i></a>
          <a href="mailto:somemail@something.xyz"><i class="far fa-envelope"></i></a>
        </div>
      </div>
    </div>

  </header>
  <section class="Everything">
    <div class="Something">
      <a class="Something" href="./something.html">
        <h1>Something</h1>

        <p>
          Something, something, something...
        </p>
      </a>
    </div>
    <div class="Something">
      <a class="Something" href="./something.html">
        <h1>Something</h1>
        <p>Something, something, something...</p>
      </a>
    </div>
  </section>
</body>

</html>

标签： javascripthtmlcss

解决方案

您有一个固定height的.nav容器，.menu因此无论何时打开.menu，高度都不会改变，也.menu不会推送内容，因为您已经声明了

.nav { 
  height: 100px
}

解决方案是min-height代替height，请检查以下内容：

* {
    text-decoration: none;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Quicksand', sans-serif;
}

.logo {
    float: left;
}

.nav {
    text-align: right;
    min-height: 100px;
    line-height: 100px;
    flex: 10;
}

.menu {
    margin: 0 30px 0 0;
    margin-top: 10px;
}

.menu a {
    clear: right;
    text-decoration: none;
    color: gray;
    margin: 0 10px;
    line-height: 70px;
    font-size: 20px;
    margin-top: 10px;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
    margin-top: 10px;
}

#toggle {
    display: none;
}

.icons {
    display: flex;
    float: right;
}

h3,
h4,
h2 {
    font-family: 'Roboto', sans-serif;
}

section {
    text-align: center;
    align-items: center;
    align-self: center;
    align-content: center;
}

@media only screen and (max-width:820px) {
    .logo {
        width: 1%;
    }
    label {
        display: block;
        cursor: pointer;
        margin-top: 10px;
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu a {
        display: block;
        background-color: white;
        margin: 0;
    }
    #toggle:checked+.menu {
        display: block;
    }
    .icons {
        display: inline-block;
        width: 100%;
    }
}

@media only screen and (max-width:250px) {
    * {
        visibility: hidden;
    }
}
<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="logo.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://kit.fontawesome.com/6b8781539d.js" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <title>Something</title>
</head>

<body>
    <header>
        <a class="logo" href="something"><img src="logo.png" alt="logo"></a>

        <div class="nav">

            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle">


            <div class="menu">
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <a href="something.html">Something</a>
                <div class="icons">
                    <a href="https://www.facebook.com/something/"> <i class="fab fa-facebook"></i></a>
                    <a href="tel:+somenumber"> <i class="fas fa-phone"></i></a>
                    <a href="mailto:somemail@something.xyz"><i class="far fa-envelope"></i></a>
                </div>
            </div>
        </div>

    </header>
    <section class="Everything">
        <div class="Something">
            <a class="Something" href="./something.html">
                <h1>Something</h1>

                <p>
                    Something, something, something...
                </p>
            </a>
        </div>
        <div class="Something">
            <a class="Something" href="./something.html">
                <h1>Something</h1>
                <p>Something, something, something...</p>
            </a>
        </div>
    </section>
</body>

</html>

推荐阅读