改善純HTML + CSS的iframe菜單

我正在一個網站的頂部有一個非常簡單的菜單欄。我想使菜單易於更新，因此將整個菜單硬編碼到每個頁面並不理想。修改和重新上傳每個頁面會非常麻煩，而且由於該網站將被靜態託管，所以我無法使用PHP創建菜單。改善純HTML + CSS的iframe菜單

我目前的解決方案在我的菜單中使用了一個iframe和一個單獨的html文件。

<iframe src="menu.html" width="100%" height="55x" id="menuframe" style="border:none"></iframe>

我得到這個，這很好地工作：

<!-- This is my `theme.css` --> 
 
#menudiv { 
 
\t width: 100%; 
 
\t height: 38px; 
 
} 
 
.menu-item { 
 
\t height: 20px; 
 
\t width: 120px; 
 
\t margin: 0; 
 
    \t display: inline-block; 
 
    \t text-align: center; 
 
    \t padding: 4px; 
 
    \t border-radius: 50px; 
 
    \t background: 000000; 
 
    \t border: 2px solid black; 
 
}

<!-- This is `menu.html`: --> 
 
<!DOCTYPE html> 
 

 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <link rel="stylesheet" type="text/css" href="theme.css"> 
 
</head> 
 

 
<body> 
 
\t <div align="center"><div id="menudiv" align="center"> 
 
\t \t <a href="index.html" title="Home" class="menu-item" target="_top"> Home </a> 
 
\t \t <a href="index.html" title="Home" class="menu-item" target="_top"> About </a> 
 
\t </div></div> 
 
</body> 
 

 
</html>

這工作得相當好一個簡單的菜單，
這在每一個新頁面的主體被粘貼只有幾個按鈕，但它不能很好地放大。如果有足夠的按鈕，則iframe會溢出，一半的按鈕將被減半。如果我最終轉向使用CSS的下拉菜單，菜單項將被溢出並切斷等。

如何爲我的靜態網站製作一個可輕鬆編輯的菜單？

的菜單必須是可編輯從一個文件，一拉menu.html或相似。
我無法使用PHP。
我從來沒有使用JavaScript/jQuery，但我很樂於使用它們的解決方案。

來源

2015-06-19 Amziraro

不要使用iframe，如果你真的不想要得到一個託管計劃。

下面介紹如何爲每個頁面仍然使用單個菜單模板。

1您可以使用JQuery的加載函數。

$(document).ready(function(){ 
    $('#somecontainer').load('path-to-your-html'); 
});

2使用您的菜單在每個頁面上創建一個JavaScript文件。

<script src="path-to-your-js"></script>

3或者，您可以創建一個HTML頁面的包括它與每一頁上：

<!--#include virtual="path-to-your-html" -->

來源

2015-06-19 04:15:13

靜態=無PHP，後處理，服務器端的東西，等只是純HTML/CSS /客戶端腳本。這是由，例如：最便宜/免費的網絡主機提供。 – Amziraro

我明白，但每月7美元，我沒有看到真正的理由將自己限制在靜態頁面上。 –

改善純HTML + CSS的iframe菜單

回答

相關問題