如何在网站上实现持久化的全局导航栏或菜单栏
[英]How to achieve a persistent global navigation bar or menu bar on a website
问题描述
所以我对 html 和 css 以及所有这些都相当陌生，我一直在练习制作一个虚拟网站，但我碰壁了。 它只是一个包含三个主要类别的“投资组合”网站。 索引只是某种登陆页面。 我正在为页面内容制作一个导航栏，我意识到每次点击导航栏中的一个项目时都会加载整个页面，我试图让导航栏以某种方式保持不变。 不是最重要的，我已经找到了如何做到这一点，但在所有页面中都是全局的。
我尝试使用 iframe，因为我认为它只能在容器内加载，但我无法让它工作。 该页面刚刚完全加载。 也许 iframe 有一种方法，但我读到它们很麻烦，而且我对如何使用它们知之甚少，所以我放弃了它。
如果有帮助，这里有一些导航栏和相应 CSS 的代码。
body { background: #ffffff; font-family: "proxima-nova", sans-serif; padding: 0; margin: 0; } .btns { margin: 0 2%; width: 38%; max-width: 193px; min-width: 60px; justify-content: space-around; text-align: center; display: flex; flex-wrap: wrap; } .btns .btn { text-decoration: none; background: #4f1e39; width: 24%; min-width: 60px; max-width: 80px; color: #ffffff; padding: 4px 0px; margin: 4px 0; } .btns .btn:hover { background: #ffffff; color: #4f1e39; font-weight: bold; } .btns .current { text-decoration: none; background: #ffffff; width: 24%; min-width: 60px; max-width: 80px; color: #4f1e39; padding: 4px 0px; margin: 4px 0; font-weight: bold; } .centerstuff { width: auto; background-color: #4fc5d6; display: flex; flex-wrap: wrap; } .minilogobox { height: 35px; } .minilogobox img { max-width: 100%; max-height: 100%; padding: 1px 4px; }
<nav> <div class="centerstuff"> <div class="minilogobox"> <a href="../index.html"> <img src="https://i.imgur.com/mCfZDsq.png" alt="mini-logo" /></a> </div> <div class="btns"> <a class="current" href="/work.html"> Work</a> <a class="btn" href="/about.html"> About</a> <a class="btn" href="/contact.html"> Contact</a> </div> <!---<div class="pagetitle"><h1>/Work</h1></div>--> </div> </nav>所以，我知道有一种方法，也许我必须学习php或java。 如果之前有人问过这个问题，我很抱歉，我发现的唯一其他问题没有用。
2 个解决方案
解决方案1
0 2020-10-29 19:41:39
因为您要离开呈现标题的页面，而且这是一个静态 html 页面，所以不会保留该代码。 当您导航到一个新页面时，会呈现该 html 文件中的所有内容，包括标题代码。
您需要使用某种动态库来呈现您想要加载的 html，同时保持其余部分完整无缺。 这与您现在正在进行的开发类型相距甚远。
我建议使用React和React Router 之类的东西来实现这一点。
然而，作为最后一点：你真的不需要担心这个。 大多数网页都以这种方式工作，您的页面加载速度应该足够快，以至于您甚至没有注意到或几乎没有注意到它。 只需在每个页面中包含标题代码，以便它无处不在。
解决方案2
0 2020-10-29 20:16:43
这是一个简单的显示和隐藏部分的想法，使用片段和 css 伪目标选择器。 单击链接，显示并跳转到相应的部分。
<html>
<head>
<style type='text/css'>
section {
display: none;
}
:target {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
<section id='about'>
All about me.
</section>
<section id='contact'>
Say hello.
</section>
</body>
</html>
（如果这是一个可访问性，请发表评论，或者如果没有足够的浏览器 :target 支持，请提供后备/解决方法。）
如何添加菜单以切换引导中的导航栏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.