如何在网站上实现持久化的全局导航栏或菜单栏

Question

so i'm fairly new to html and css and all that, I've been practicing making a dummy website and I hit a wall.所以我对 html 和 css 以及所有这些都相当陌生，我一直在练习制作一个虚拟网站，但我碰壁了。 It is just a "Portfolio" website with three main categories.它只是一个包含三个主要类别的“投资组合”网站。 the Index is just a landing page of sorts.索引只是某种登陆页面。 I was making a navigation bar for the page contents and I realized that the whole page loads each time an item from the nav bar is clicked, i was trying to make the nav bar stick somehow.我正在为页面内容制作一个导航栏，我意识到每次点击导航栏中的一个项目时都会加载整个页面，我试图让导航栏以某种方式保持不变。 Not to the top, I've already found how to do that, but globally across all the pages.不是最重要的，我已经找到了如何做到这一点，但在所有页面中都是全局的。

I tried with iframes since i figured it'd only load inside the container but i couldn't get it to work.我尝试使用 iframe，因为我认为它只能在容器内加载，但我无法让它工作。 The page just loaded entirely.该页面刚刚完全加载。 Maybe there's a way with iframes but I read they are troublesome and I just don't know enough about how to work with them, so I scrapped that.也许 iframe 有一种方法，但我读到它们很麻烦，而且我对如何使用它们知之甚少，所以我放弃了它。

Here´s some code for the nav bar and the corresponding CSS if it helps.如果有帮助，这里有一些导航栏和相应 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>

So, I know there's a way, maybe I have to learn php or java.所以，我知道有一种方法，也许我必须学习php或java。 I'm sorry if this has been asked before, the only other question I've found was not useful.如果之前有人问过这个问题，我很抱歉，我发现的唯一其他问题没有用。

Answer 1

Because you are navigating away from the page where your header is rendered, and this is a static html page, that code won't remain.因为您要离开呈现标题的页面，而且这是一个静态 html 页面，所以不会保留该代码。 When you navigate to a new page, everything in that html file is rendered, including the header code.当您导航到一个新页面时，会呈现该 html 文件中的所有内容，包括标题代码。

You'll need to use some kind of dynamic library to render the html you want to load, while keeping the rest in-tact.您需要使用某种动态库来呈现您想要加载的 html，同时保持其余部分完整无缺。 This is a long step away from type of development you're doing right now.这与您现在正在进行的开发类型相距甚远。

I would recommend using something like React and React Router to accomplish this.我建议使用React和React Router 之类的东西来实现这一点。

As a final note however: you really don't need to worry about this.然而，作为最后一点：你真的不需要担心这个。 The majority of webpages work this way, your page should be loading fast enough that you don't even or barely notice it.大多数网页都以这种方式工作，您的页面加载速度应该足够快，以至于您甚至没有注意到或几乎没有注意到它。 Just include the header code in every page so that it is omni-present.只需在每个页面中包含标题代码，以便它无处不在。

Answer 2

Here's a simple show and hide section idea, using fragments and css pseudo target selector.这是一个简单的显示和隐藏部分的想法，使用片段和 css 伪目标选择器。 Click on a link, show and jump to the appropriate section.单击链接，显示并跳转到相应的部分。

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

(Please comment if this is an accessibility no no, or provide a fallback/workaround if there isn't adequate browser :target support.) （如果这是一个可访问性，请发表评论，或者如果没有足够的浏览器 :target 支持，请提供后备/解决方法。）

如何在网站上实现持久化的全局导航栏或菜单栏

问题描述

2 个解决方案

解决方案1
0 2020-10-29 19:41:39

解决方案2
0 2020-10-29 20:16:43

如何在网站上实现持久化的全局导航栏或菜单栏

问题描述

2 个解决方案

解决方案1 0 2020-10-29 19:41:39

解决方案2 0 2020-10-29 20:16:43

解决方案1
0 2020-10-29 19:41:39

解决方案2
0 2020-10-29 20:16:43