Как переиспользовать навигационную панель на HTML-страницах

Быстрый ответ

Воспользуйтесь JavaScript для того, чтобы сделать панель навигации переиспользуемой:

<!-- Navigation.html – ваш вариант стильной навигации -->
<nav>
   <ul>
       <li><a href="/">Главная</a></li>
       <li><a href="/about">О нас</a></li>
   </ul>
</nav>

// Данный скрипт поможет подключить навигацию 
fetch('navigation.html')
.then(response => response.text())
.then(navigation => document.getElementById('navbar').innerHTML = navigation);

<!-- Добавьте этот код на каждой странице -->
<div id="navbar"></div>
<script src="script.js"></script>

Этот метод позволяет загрузить панель навигации на каждую страницу с помощью функции fetch в JavaScript. Такой подход облегчает поддержку и следует принципу DRY (Don't Repeat Yourself).

Использование jQuery для вставки навигации

Если вы отдаёте предпочтение jQuery, следующий код вам подойдет:

$(function(){
    $("#navbar").load("navigation.html");
});

Не забывайте включить библиотеку jQuery перед началом работы:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="navbar"></div>

Засчет простоты синтаксиса и эффективной работы с кроссбраузерной совместимостью jQuery становится достойным альтернативным решением для fetch.

PHP помогает обеспечить переиспользование

PHP предоставляет простое решение для вставки HTML с помощью команды include:

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

Код вашей навигационной панели будет встроен в месте, где сервер формирует структуру страницы. Это позволяет централизовать управление кодом навигации, избегая AJAX или Fetch на клиентской стороне.

ВАЖНО: Убедитесь, что ваш файл навигации имеет расширение .php, и ваш сервер поддерживает PHP.

Подсветка активной страницы

Подсветка активного пункта меню привносит изюминку в навигационную панель:

window.onload = function() {
    const links = document.querySelectorAll('nav ul li a');
    const currentUrl = window.location.href;

    links.forEach(function(link) {
        if(link.href === currentUrl) {
            link.classList.add("active");
        }
    });
};

Оформление активной ссылки можно задать с помощью CSS:

a.active {
    font-weight: bold;
    color: red;
}

Ваша активная ссылка будет выделяться, улучшая опыт пользователя при навигации по сайту.

Визуализация

Восприятие панели навигации можно упростить, представив её как инструменты, которые вы используете в различных местах.

Рабочие области (🏗️🏢🏠): Различные веб-страницы
Инструменты (🧰): Панель навигации

🧰 используется в разных местах: её можно использовать как на одном, так и на другом сайте:

<!-- 🧰 – универсальный инструмент -->
<nav>
  <ul>
    <li>Главная</li>
    <li>О нас</li>
    <li>Контакты</li>
  </ul>
</nav>

Перенесите 🧰 из 🏗️ в 🏢, а затем в 🏠. Этими инструментами можно пользоваться на разных веб-страницах.

Оптимизация и производительность

Обеспечивание максимальной эффективности кода навигационной панели принципиально как для поддержки, так и для общей производительности. Следите за тем, чтобы ваш HTML был чистым, а CSS — лаконичным.

Обратите внимание, что метод load в jQuery может работать медленнее нативного fetch в JavaScript из-за дополнительной загрузки, связанной с библиотекой jQuery.

Фреймворки при поддержке

Фреймворки фронтенда, такие как Angular, React или Vue.js, предлагают собственные способы реализации переиспользуемых компонентов. Например, React использует JSX для отображения компонентов, что упрощает их использование на множестве страниц:

import React from 'react';
import NavigationBar from './components/NavigationBar';

function App() {
  return (
    <div>
      <NavigationBar />
      {/* Оставшаяся часть приложения */}
    </div>
  );
}

Такой подход подразумевает компонентную архитектуру и предоставляет средства для управления состоянием, особенно когда в навигационном меню присутствует сложная логика.

Полезные материалы

1. SSI Команды – обучающий материал от W3C о том, как использовать общие компоненты с помощью Server Side Includes.
2. Can I use... Таблицы совместимости для HTML5, CSS3 и пр. – инструмент для проверки совместимости браузеров ваших HTML-шаблонов.
3. GitHub Pages – вариант создания сайтов с переиспользуемыми компонентами через ваш репозиторий на GitHub.
4. Как встроить HTML – инструкция от W3Schools по применению HTML-фрагментов на различных веб-страницах.