在响应式页脚菜单中添加“固定”div
[英]Add a "fixed" div in responsive footer menu
问题描述
在以下 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>
欢迎任何有关良好实施的想法！
2 个解决方案
解决方案1
1 2021-11-04 08:59:53
这是你喜欢的东西？。
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%; right: 0%; width: 100%; display: flex; } .navbar a { color: #f2f2f2; text-decoration: none; font-size: 17px; padding: 0 15px; } .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; } */ #copyright { flex-grow: 1; text-align: center; color: white; } #copyright-bottom { flex-grow: 1; text-align: center; color: white; display: none; } @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 { display: inline-block; text-align: center; } .navbar.responsive .icon { position: absolute; right: 0; bottom: 0; } .navbar.responsive a { float: none; display: block; text-align: left; } #copyright { flex-grow: 1; text-align: center; color: white; display: none; } #copyright-bottom { flex-grow: 1; text-align: center; color: white; display: block; } } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="navbar" id="myNavbar"> <span id="copyright">© domain.com</span> <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 > <span id="copyright-bottom">© domain.com</span> </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
0 2021-11-04 08:26:12
试试这个解决方案：
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>
我正在尝试使用固定位置菜单制作响应式网站。 如何获得菜单div的大小以将容器下推？
[英]I'm trying to make a responsive website with a fixed position menu. How do I get the size of the menu div to push the container down?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.