Панель навигации HTML/CSS на нескольких страницах

Я только что закончил делать свою страницу home/index.html. Чтобы сохранить панель навигации там, где она есть, и оставить ее, пока пользователи нажимают на все мои страницы. Нужно ли копировать и вставлять код навигации вверху каждой страницы? Или есть другой способ сделать так, чтобы он выглядел чище?

HMTL nav:

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

Ответы

Ответ 1

Это помогло мне. Моя панель навигации находится в теге тела. Весь код для панели навигации находится в файле nav.html (без какого-либо тега html или body, только код для панели навигации). На целевой странице это находится в теге head:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Затем в теге body контейнер создается с уникальным идентификатором и блоком javascript для загрузки nav.html в контейнер следующим образом:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Ответ 2

Я знаю, что это довольно старый вопрос, но когда у вас есть JavaScript, вы можете использовать jQuery и его методы AJAX.

Сначала создайте страницу со всем содержимым HTML-панели навигации.

Далее, используйте метод jQuery $.get для получения содержимого страницы. Например, предположим, что вы поместили всю панель навигации в файл с именем navigation.html и добавили тег placeholder (Like <div id="nav-placeholder">) в свой index.html, тогда вы использовали бы следующий код:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

Ответ 3

с HTML5 вы можете использовать тег импорта (учитывая ограниченную поддержку браузера: подробности здесь)

<head>
    <link rel="import" href="/path/to/nav.html">
</head>

Затем поместите вашу навигацию в nav.html и импортируйте ее туда, где вы хотите ее использовать. Есть хорошая статья об этом в Team Treehouse, если вам интересно.

http://blog.teamtreehouse.com/introduction-html-imports

Ответ 4

Вы можете использовать php для создания многостраничного веб-сайта.

Создайте header.php, в который вы должны поместить весь свой html-код для меню и социальных сетей и т.д.
Вставьте header.php в ваш index.php, используя следующий код

<? php include 'header.php'; ?>

(Над кодом будет выгружать весь код html до этого) Содержимое вашего сайта.

Аналогичным образом вы можете легко создавать нижний колонтитул и другие элементы. Встроенный HTML-код поддержки PHP в своих расширениях. Итак, лучше изучите это легкое решение.

Ответ 5

Я не знаю, будет ли это работать для вас, но это работает для меня. Попытайтесь поместить коды навигации без какого-либо тега заголовка или тела (только код, в котором начальная и конечная панель навигации). Что произойдет, вы будете отдельно размещать коды для панели навигации. Скажем, у вас уже есть навигационные коды на navigation.html, и вы включите его на другую страницу, скажем, что это будет index.php. Чтобы включить его в тег тела, и панель навигации будет загружена на него.

Ответ 6

Очень старая, но достаточно простая техника - использовать "Включения на стороне сервера", чтобы включать HTML-страницы в страницу верхнего уровня с расширением .shtml. Например, это будет ваш файл index.shtml:

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

Да, это хромает, но это работает. Не забудьте включить поддержку SSI в конфигурации вашего HTTP-сервера (как это сделать для Apache).

Ответ 7

Я знаю, что это старый пост, но я перепробовал все, на чем я ездил, но он все еще не работал. У кого-нибудь есть другой метод, который должен работать, и хотите объяснить это?

Ответ 8

Брандо ZWZ дает отличные ответы на эту ситуацию.

Re: та же панель навигации на нескольких страницах 21 августа 2018 10:13 | LINK

Насколько я знаю, есть несколько решений.

Например:

Весь код панели навигации находится в файле nav.html (без тегов html или body, только код панели навигации).

Тогда мы могли бы напрямую загрузить его из jquery без написания большого количества кодов.

Как это:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

Solution2:

Вы можете использовать код JavaScript для генерации всей навигационной панели.

Как это:

Javascript код:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="#" onclick="location.href='https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages