在响应式页脚菜单中添加“固定”div
Posted
技术标签:
【中文标题】在响应式页脚菜单中添加“固定”div【英文标题】：Add a "fixed" div in responsive footer menu 【发布时间】：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()">☰</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>欢迎任何关于良好实施的想法！
【问题讨论】：
【参考方案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()">☰</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()"
>☰</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。您只需四处浏览即可获得更多信息网格。 你确定这个版本有效吗？我没有在我的网站上测试过它，但是在 *** 中，当我点击运行代码 sn-p 按钮时，我总是看到隐藏的菜单项，我必须单击按钮来展开它们。我没有看到对窗口大小变化的任何反应。之前的代码解决了一些小问题。 感谢您的澄清。之前的代码即使在不展开窗口的情况下也能正常工作，所以我现在没有想到在全窗口模式下测试它。你是对的，代码工作正常！以上是关于在响应式页脚菜单中添加“固定”div的主要内容，如果未能解决你的问题，请参考以下文章
Angular 中的响应式页脚，带有始终位于页面底部的引导程序。不粘