如何在網站上實現持久化的全局導航欄或菜單欄
[英]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.