Улучшение чистого HTML + CSS iframe menu

Я делаю сайт с очень простой панелью меню в верхней части каждой страницы. Я хотел бы сделать меню легко обновляемым, поэтому жесткое кодирование всего меню на каждой странице не идеально. Изменение и повторная загрузка каждой страницы будет слишком громоздкой, и поскольку веб-сайт будет размещен статически, я не могу использовать PHP, создав меню.Улучшение чистого HTML + CSS iframe menu

Мое текущее решение использует 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

Dont использовать 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

Static = не-PHP, после обработки на стороне сервера ничего, и т.д. просто HTML/CSS/Сценарии клиентской стороны. Это предлагают, например: самые дешевые/бесплатные веб-хосты. – Amziraro

Я понимаю, но по 7 долларов в месяц я не вижу реальной причины ограничивать себя статическими страницами. –

Улучшение чистого HTML + CSS iframe menu

ответ

Смежные вопросы