使用 HTML 和 CSS 的简单导航侧边栏答案

【问题标题】：Simple Navigation Sidebar using HTML and CSS使用 HTML 和 CSS 的简单导航侧边栏
【发布时间】：2020-05-09 21:37:47
【问题描述】：

我过去做过一些简单的 HTML 页面。现在我想添加一个导航侧边栏。寻找一个示例，我找到了一个似乎可以满足我需要的示例。

我已经尝试并修改了这个示例，也可以在线查看和测试：
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_fixed

链接列表仅包含哈希，因此单击其中任何一个时都不会发生任何事情。
所以我在列表底部添加了我自己的链接：
<li><a href="https://de.wikipedia.org">Wiki</a></li>

单击我自己的链接“Wiki”会打开 Wikipedia。然而，这个链接是用整个窗口打开的，而不是只用窗口的右边部分。导航栏消失。

现在我的问题是如何定义我自己的链接，这些链接只在窗口右侧打开，保持导航栏可见。

我正在使用 Firefox 的 Windows PC 上工作。
链接到示例的文章可以在这里找到：
https://www.w3schools.com/css/css_navbar.asp

非常感谢。

【问题讨论】：

标签： html css navigation

【解决方案1】：

不要混淆document 和window。当您打开链接时，该链接的窗口会在新窗口中打开。控制它的一种方法是使用iFrame 在当前document 中加载不同的window。但也许这不是你的目的。如果您想通过导航到您编写的新窗口来呈现自己的书面页面 - 使用相同的导航。该网站似乎会在“相同”文档中打开。

【讨论】：

谢谢。这是否意味着每个链接页面都必须具有相同的导航栏？这似乎不是很优雅。我还想链接到示例中所示的外部页面。听起来我必须研究 iframe。
是的，是的。这就是为什么前端开发人员使用 React 或 Vue 之类的框架来编写一个组件并在任何地方轻松使用它的原因

【解决方案2】：

由于我原来的方法不起作用，我结合了 stackoverflow 的两个答案以获得所需的结果。
Sidebar with iframe
和
Open link in iframe

【讨论】：