Как сохранить панель навигации в одном файле?

У меня есть панель навигации для моего сайта:

    <div id='menu'><ul>
    <li><a href='index.html'>Home</a></li>
    <li><a href='about.html'>About Us</a></li>
    <li><a href='http://www.brownpapertickets.com' target=_blank>Ticket Sales</a></li>
    <li><a href='merch.html'>Merchandise</a>
        <ul>
            <li><a href='merch.html'>Products</a></li>
            <li><a href='cart.html'>Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html'>Past Shows</a>
        <ul>
            <li><a href='photos.html'>Photo Gallery</a></li>
            <li><a href='vids.html'>Video Clips</a></li>
        </ul>
    </li>
</ul></div>

Я хочу сохранить это в одном центральном месте, чтобы каждый раз, когда мне приходилось добавлять гиперссылку или что-то, мне не нужно редактировать каждый файл. Какой лучший способ сделать это?

ОТВЕТЫ

Ответ 1

Предполагая, что вы используете язык сценариев, такой как PHP, вы просто сохраняете этот HTML-код выше в php файле с именем header.php (или что-то по своему вкусу)

Затем в других файлах php вы пишете:

include_once('header.php');, и он перевернет этот HTML-код прямо там.

Некоторые ресурсы для вас:

http://php.net/manual/en/function.include.php

http://www.php.net/manual/en/function.include-once.php

http://php.about.com/od/tutorials/ht/template_site.htm

Наслаждайтесь!

Ответ 2

Обновление @AlienWebguy отметил, что эти решения повредят вашему ранжированию в результатах поисковой системы. Если вас это волнует, не используйте их. Но, на мой взгляд, в качестве правильных вариантов они заслуживают внимания.

Если серверная сторона включает (используя PHP или какой-либо другой язык), это не вариант, который вы могли бы сделать, используя:

  • Рамки
    На всех ваших страницах включите iframe (в стиле без границ или полос прокрутки) и установите src как HTML файл, который содержит вашу навигационную разметку. Конечно, у вас появятся проблемы со следующими ссылками, и вам, вероятно, придется прибегнуть к JavaScript, чтобы получить "правильное" поведение. Это, вероятно, не стоит усилий. Чтобы правильно следовать ссылкам, вам нужно использовать атрибут target в ваших навигационных ссылках на _top (или, возможно, _parent). Это, вероятно, самое простое решение, которое должно работать даже в пользовательских агентах без поддержки сценариев.

    Например, ваша страница будет выглядеть так:

    <html>
<body>
    <iframe src="navbar.html" class="navbar" />
    <!-- other content here -->
</body>
</html

    с navbar.html выглядит следующим образом:

    <html>
<body>
    <div id='menu'><ul>
        <li><a href='index.html' target="_top">Home</a></li>
        <li><a href='about.html' target="_top">About Us</a></li>
        <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
        <li><a href='merch.html' target="_top">Merchandise</a>
            <ul>
                <li><a href='merch.html' target="_top">Products</a></li>
                <li><a href='cart.html' target="_top">Shopping Cart</a></li>
            </ul>
        </li>
        <li><a href='past.html' target="_top">Past Shows</a>
            <ul>
                <li><a href='photos.html' target="_top">Photo Gallery</a></li>
                <li><a href='vids.html' target="_top">Video Clips</a></li>
            </ul>
        </li>
    </ul></div>
</body>
</html>

  • Ajax
    Сохраните HTML-код, необходимый для навигационной панели в виде фрагмента HTML (не полный HTML-документ) и загрузите его с помощью ajax при загрузке страницы. Вот пример использования jQuery. На вашей странице:

    <html>
<script type="text/javascript">
    $(document).ready(function(){
        $('#menu').('navbar.html');
    });
</script>

<body>
    <div id='menu' />
</body>
</html>

    navbar.html

    <ul>
    <li><a href='index.html' target="_top">Home</a></li>
    <li><a href='about.html' target="_top">About Us</a></li>
    <li><a href='http://www.brownpapertickets.com' target="_blank">Ticket Sales</a></li>
    <li><a href='merch.html' target="_top">Merchandise</a>
        <ul>
            <li><a href='merch.html' target="_top">Products</a></li>
            <li><a href='cart.html' target="_top">Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html' target="_top">Past Shows</a>
        <ul>
            <li><a href='photos.html' target="_top">Photo Gallery</a></li>
            <li><a href='vids.html' target="_top">Video Clips</a></li>
        </ul>
    </li>
</ul>

Ответ 3

Я использую smartmenus для jquery, который требует, чтобы вы добавили

$('#main-menu').smartmenus();

если у вас есть подменю

Я обнаружил, что если вы увеличиваете нагрузку до:

$('#menu').load('navbar.html',function(){
    $('#main-menu').smartmenus();
});

это отлично работает. Где главное меню - это класс ul блока меню.

Ответ 4

Вы можете использовать AJAX, а затем создать отдельную страницу только с кодом меню.

На самом деле вы можете просто использовать jQuery .load(), который очень прост в использовании.

Здесь пример загрузки nav.html в div с #nav-container для ID:

<script type="text/javascript">
$(document).ready(function() {
$('#nav-container').load('/path/to/nav.html');
});
</script>

Вам просто нужно добавить этот код на каждую страницу и иметь div, но как только вы это сделаете, вам нужно будет обновить nav.html

Примечание.. Это лучший способ сделать это, если вы не можете использовать PHP, поскольку iframe просто не так хороши. Это фактически загрузит код с nav.html на страницу справа, когда загружается страница. (примите теги <html>, <body> и другие теги страницы. Это будет только код внутри <body></body> на странице nav.html.

Для ваших пользователей без JavaScript просто поместите iframe в теги <noscript></noscript>, если вы действительно этого хотите. Если у вас должен быть включен JavaScript, независимо от того, используете ли вы свой сайт, вам не нужно беспокоиться об этом. (помните, что в iframe вы должны устанавливать цели и прочее на всех ссылках в навигации.)

Не забудьте включить ссылку jQuery в теги head на всех ваших страницах, на которые вы загружаете nav.html, если вы еще этого не сделали.

Надеюсь, что это будет полезно.