在响应式页脚菜单中添加 "fixed" div

Question

在以下用于在网页底部实现响应式菜单的 w3schools 代码中，我添加了一个 div 并声明了该域的版权。我想让版权 div 在屏幕底部居中 只要它不被菜单项覆盖，因为浏览器 window 得到更小，然后再次移动到页面底部菜单项下方，当菜单项被它们覆盖时，或者当菜单以前最小化时通过相关按钮打开菜单时。

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>

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

Answer 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>

Answer 2

开始吧我还添加了浏览器支持，因为您提到它在您的浏览器上看起来不正确。我发表了更多评论，以便您了解正在发生的事情。

  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>

在响应式页脚菜单中添加 "fixed" div

Add a "fixed" div in responsive footer menu

html

javascript

css

responsive-design

responsive