在响应式页脚菜单中添加“固定”div

【问题标题】：Add a "fixed" div in responsive footer menu在响应式页脚菜单中添加“固定”div
【发布时间】：2021-12-18 11:10:20
【问题描述】：

在以下 w3schools 代码中，该代码在网页底部实现了响应式菜单，我添加了一个 div，其中包含域的版权声明。我想让版权 div 在屏幕底部居中只要它没有被菜单项覆盖，随着浏览器窗口变小，然后再次移动到页面底部在菜单项被菜单项覆盖时或在菜单项之前已最小化时通过相关按钮打开时位于菜单项下方。

function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

.navbar .icon {
  display: none;
}

#copyright {
  position: absolute;
  top: 20%;
  left: 25%;
  width: 50%;
  height: 50%;
  color: white;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="navbar" id="myNavbar">
    <div id="copyright">© domain.com</div>
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Bottom Navbar Example</h2>
    <p>Resize the browser window to see how it works.</p>
  </div>

</body>

</html>

欢迎任何关于良好实施的想法！

【问题讨论】：

    标签： javascript html css responsive-design responsive


    【解决方案1】：

    试试这个解决方案：

    function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
    body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

.navbar .icon {
  display: none;
}

#copyright {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

@media screen and (max-width: 600px) {
  .navbar {
    display: block;
  }

  .navbar a:not(:first-child) {
    display: none;
  }

  .navbar a.icon {
    float: right;
    display: block;
  }

  #copyright {
    margin: 5px;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="navbar" id="myNavbar">
    <div id="copyright">© domain.com</div>
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Bottom Navbar Example</h2>
    <p>Resize the browser window to see how it works.</p>
  </div>

</body>

</html>

    【讨论】：

    • 它有 2 个问题。第一个：当窗口变窄时，页脚变高，版权保留在它的顶部。此外，当使用按钮扩展菜单时，版权保留在菜单上方。
    【解决方案2】：

    Here You Go 我还添加了浏览器支持，因为您提到它在您的浏览器上看起来不正确。我发表了更多评论，以便您了解发生了什么。

      function myFunction() {
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
      x.className += " responsive";
    } else {
      x.className = "navbar";
    }
  }
    /*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 7 version
*/

  /*
  Body
  */

  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  /*
  The Navigation Container/Block
  */

  .navbar {
    background-color: #333;
    position: fixed;
    bottom: 0%;
    right: 0%;
    width: 100%;
  }

  /*
  Grid Container
  */

  .grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
  }

  /*
  Item 1
  */

  .item-1 {
    text-align: end;
  }

  /*
  Item 2
  */

  .item-2 {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  /*
  Item 3
  */

  .item-3 {
    text-align: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .item-3 a {
    color: #f2f2f2;
    text-align: center;
    padding: 15px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .item-3 a:hover {
    background-color: #ddd;
    color: black;
  }

  .item-3 a.active {
    background-color: #04aa6d;
    color: white;
  }

  /*
  Toggle Icon For Menu
  */

  .navbar .icon {
    display: none;
  }

  /*
  This Will Display In Media Queries
  */

  .copyright-bottom {
    display: none;
  }

  /*
  Media Queries
  */

  @media screen and (max-width: 970px) {
    .item-3 a {
      display: none;
    }

    .navbar a.icon {
      display: block;
    }

    .navbar.responsive .icon {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .navbar.responsive a {
      display: block;
      text-align: left;
    }

    .navbar.responsive .copyright-bottom {
      display: block;
      text-align: center;
      color: white;
    }

    .navbar.responsive .copyright {
      display: none;
    }

    .navbar.responsive .item-3 {
      -ms-grid-column-span: 3;
      grid-column: span 3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  }
    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

<div class="navbar" id="myNavbar">
  <div class="grid-container">
    <div class="item-1"></div>
    <div class="item-2">
      <p class="copyright">© domain.com</p>
    </div>
    <div class="item-3">
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
      <a href="#news">News</a>
      <a href="#home" class="active">Home</a>
      <a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()"
        >&#9776;</a
      >
    </div>
  </div>
  <p class="copyright-bottom">© domain.com</p>
</div>

<div style="padding-left: 16px">
  <h2>Responsive Bottom Navbar Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>
</body>

</html>

    【讨论】：

    • 在测试了您的代码并进行了适当的更改以使其适合我自己的网站后，我删除了我的第一条评论。两件事：页脚比原始代码窄。这是为什么？而我的第二个问题是版权文本最初不是居中在屏幕中间，而是在屏幕左侧和最左边的菜单按钮中间。就这样。否则，代码可以完美运行！
    • 另一件可以改变的事情是：当菜单通过按下按钮展开时，它会覆盖页面的部分内容。理想情况下，当用户滚动页面内容时，菜单不应隐藏文本。初始菜单也应如此。它不应涵盖任何文本。如果我为初始菜单设置了更宽的高度，它也会覆盖页面的内容，即使我已经滚动到底部。
    • 我使用了 Grid 而不是 flex-box。您只需四处浏览即可获得更多信息网格。
    • 你确定这个版本有效吗？我没有在我的网站上测试过它，但是在 Stackoverflow 中，当我点击运行代码 sn-p 按钮时，我总是看到隐藏的菜单项，我必须单击按钮来展开它们。我没有看到对窗口大小变化的任何反应。之前的代码解决了一些小问题。
    • 感谢您的澄清。之前的代码即使在不展开窗口的情况下也能正常工作，所以我现在没有想到在全窗口模式下测试它。你是对的，代码工作正常！
    猜你喜欢
    • 1970-01-01
    • 2014-04-11
    • 2013-01-31
    • 2011-08-04
    • 1970-01-01
    • 2012-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode