FM Template - HTML/CSS/JS Шаблон Сайта

Версия: 1.0.3

📁 Структура проекта

fm.dev.lan/
├── template/           # Шаблоны и статические файлы
│   ├── css/           # Стили (32 файла)
│   ├── js/            # Скрипты
│   ├── fonts/         # Шрифты
│   ├── images/        # Изображения
│   └── index/         # Стили для index.html
├── parts/             # TPL-шаблоны для AJAX загрузки   (используются временно для примера меню на странице сайта, в реальных проектах не используются)
├── resources/         # Ресурсы (логотипы, изображения)
├── *.html             # HTML-страницы (25 файлов)
└── README.md          # Документация

📄 HTML Страницы

Файл	Описание
index.html	Главная страница со списком всех демо-страниц (4 колонки)
home.html	Домашняя страница (меню справа)
home-1.html	Домашняя страница (меню слева)
pages.html	Стандартная страница с хедером и breadcrumbs
pages-1.html	Стандартная страница (альтернативный вариант)
nav-all.html	Горизонтальное меню справа
nav-all-l.html	Горизонтальное меню слева
grid.html	Сетка: 2, 3, 4, 5, 6, 8 колонок
content-grid.html	Контент с сеткой: 2+1, 1+2+1, 1+2 ячейки
content.html	Контент с новостным виджетом (3+1)
content-2.html	Контент с новостным виджетом (вариант 2)
blog.html	Блог с карточками и пагинацией
element.html	Элементы: Список, Цитата
simple-faq.html	FAQ Аккордеон
panel-menu.html	Панель-меню аккордеон
sidebar-menu.html	Боковое меню аккордеон
search.html	Поиск с виджетом
search-modal.html	Модальный поиск
search2.html	Поиск (альтернативный вариант)
footer.html	Подвал (отдельно)
modal.html	Модальное окно
timer.html	Таймер (модальное окно по времени)
slider.html	Слайдер
checkbox.html	Checkbox и Radiobutton

🎨 CSS Файлы

Основные

Файл	Описание
main.css	Главный файл (импортирует все стили)
fonts.css	Шрифты
font-awesome.min.css	Иконки Font Awesome
nav-left.css	Горизонтальное меню (левое)
nav-right.css	Горизонтальное меню (правое)

Компоненты

Файл	Описание
top.css	Верхняя панель (контакты, соцсети)
nav.css	Навигация
burger.css	Кнопка бургер (анимация)
sidebar-panel.css	Боковая панель
header.css	Хедер
breadcrumbs.css	Хлебные крошки
grid.css	Сетка (2-8 колонок)
content-grid.css	Сетка контента
content.css	Контент
blog.css	Блог
element.css	Элементы (списки, цитаты)
simple-faq.css	FAQ аккордеон
panel-menu.css	Панель меню
sidebar-menu.css	Боковое меню
search.css	Поиск
search-modal.css	Модальный поиск
footer.css	Подвал
modal.css	Модальные окна
timer.css	Таймер
top-scroll.css	Кнопка "Наверх"
radiobtn.css	Radiobutton стили
slide.css	Слайдер
fade.css	Fade анимации
media.css	Медиа-запросы (адаптив)

🔧 JavaScript

Файл	Описание
jquery.min.js	jQuery библиотека
util.min.js	Bootstrap util (опционально)
carousel.min.js	Карусель/Слайдер

📦 TPL Шаблоны (используются временно для примера меню на странице сайта, в реальных проектах не используются)

Файл	Описание
header-menu.tpl	Горизонтальное меню (загружается через AJAX)
panel-menu.tpl	Панель-меню для боковой панели

🚀 Быстрый старт

1. Откройте index.html в браузере
2. Выберите нужную демо-страницу
3. Скопируйте код для использования в своём проекте

📝 Комментарии в коде

Все HTML и CSS файлы содержат комментарии для быстрой навигации:

HTML блоки

<!-- Header: Top секция -->
<!-- Меню -->
<!-- Сетка: 2 ячейки -->
<!-- Сетка: 3 ячейки -->
<!-- Сетка: 5 ячеек -->
<!-- FAQ Аккордеон -->
<!-- Меню аккордеон -->
<!-- Footer -->
<!-- Список List -->
<!-- Цитата -->
<!-- Breadcrumbs -->
<!-- Sidebar -->
<!-- Top скролл -->
<!-- Модальное окно -->
<!-- Поиск -->
<!-- Слайдер -->

CSS секции

/* ========================================
   Burger Menu - Кнопка бургер
   ======================================== */

/* ========================================
   Grid - Сетка
   ======================================== */

/* ========================================
   Навигация - Горизонтальное меню
   ======================================== */

🎯 Основные классы

Сетка

• .cells-2fr — 2 колонки
• .cells-3fr — 3 колонки
• .cells-4fr — 4 колонки
• .cells-5fr — 5 колонок
• .cells-6fr — 6 колонок
• .cells-8fr — 8 колонок
• .cells-2fr-1fr — 2+1 ячейки
• .cells-1fr-2fr-1fr — 1+2+1 ячейки
• .cells-1fr-2fr — 1+2 ячейки
• .cells-3fr-1fr — 3+1 ячейки

Аккордеон меню

Используется в nav-all.html и nav-all-l.html. Универсальный скрипт для многоуровневого меню в боковой панели.

Принцип работы:

• Клик по элементу меню открывает/закрывает подменю
• При открытии закрываются другие меню на том же уровне
• Вложенные меню закрываются рекурсивно
• Уровень panel-menu-level0 игнорируется (не аккордеон)

Классы:

• .wrap-menu — обёртка меню
• .panel-menu-level0 — базовый уровень (ссылки)
• .panel-menu-level1 — первый уровень аккордеона
• .panel-menu-level2 — второй уровень аккордеона
• .panel-submenu-level1 — подменю 1 уровня
• .panel-submenu-level2 — подменю 2 уровня
• .active — активное (открытое) меню

Пример структуры:

<nav class="wrap-menu">
  <div class="panel-menu">
    <ul class="panel-menu-item">
      <li class="panel-menu-level1"><h5>Level 1</h5></li>
      <li class="panel-submenu-level1">
        <ul>
          <li><a href="#">Link</a></li>
          <li class="panel-menu-level2"><h6>Level 2</h6></li>
          <li class="panel-submenu-level2">
            <ul>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Модификаторы страниц

• .pages — стандартная страница (серый top-container)
• .home — домашняя страница (прозрачный top-container)
• .basic — базовая страница (прозрачный top-container, новый стиль)

Меню

• .nav-wrapper > ul — основное меню
• .panel-menu-level1 — аккордеон 1 уровня
• .panel-menu-level2 — аккордеон 2 уровня
• .sidebar-menu-level1 — боковое меню 1 уровня
• .sidebar-menu-level2 — боковое меню 2 уровня

Компоненты

• .burger — кнопка бургер
• .sidebar-panel — боковая панель
• .breadcrumb — хлебные крошки
• .top-scroll — кнопка "Наверх"
• .modal-window-wrapper — модальное окно
• .faq — FAQ аккордеон
• .header-wrapper-basic — хедер для базовых страниц
• .index-item — ячейка-ссылка на index.html
• .index-title — заголовок DN Base Frame

⚠️ Известные проблемы

1. Дублирование breadcrumb в pages.html и pages-1.html — два одинаковых блока
2. Лишние $(function() {...}) — в некоторых файлах по 5-6 отдельных блоков (можно объединить)
3. Устаревший .click() — рекомендуется заменить на .on('click')

📋 Changelog

1.0.3 (текущая)

• ✅ Добавлен nav-all-l.html — горизонтальное меню слева
• ✅ Обновлён index.html — сетка 4 колонки, ссылки на все страницы
• ✅ Создан template/index/index.css — стили для index.html
• ✅ Добавлены CSS классы .basic (аналог .pages для новых страниц)
• ✅ Добавлен .header-wrapper-basic — хедер для базовых страниц
• ✅ Исправлен путь в radiobtn.css: checkbox3.svg → icons/checkbox3.svg
• ✅ Исправлен header-menu.tpl — удалён лишний </i>
• ✅ Возвращена плавность меню в pages-1.html и nav-all-l.html (transition: '.5s')
• ✅ Обновлены CSS: media.css, top.css, nav.css, footer.css, content.css, header.css, nav-right.css
• ✅ Изменён бургер: средняя полоса 65%, margin 7px
• ✅ Добавлен логотип в sidebar-panel (nav-all.html, search2.html, search-modal.html)
• ✅ Обновлён README.md

1.0.2

• ✅ Исправлена синтаксическая ошибка function(){+ в 6 файлах
• ✅ Удалены файлы: search.css~, burger.origin.css
• ✅ Удалена папка: bakcups/
• ✅ Удалены пустые TPL: footerHome.tpl, footerPages.tpl, headerHome.tpl, headerPages.tpl
• ✅ Исправлены лишние </head> в modal.html, slider.html
• ✅ Исправлен заголовок в element.html
• ✅ Исправлены пути favicon в index.html
• ✅ Удалён неиспользуемый util.min.js из slider.html
• ✅ Добавлены комментарии во все HTML файлы
• ✅ Добавлены комментарии в CSS файлы
• ✅ Создан README.md

📞 Контакты

Проект: fm.dev.lan Локальная разработка