Веб-розробка підручників - Навігаційне меню

Підручник для вивчення інформатики або медіа-інформатики.

Меню навігації

Якщо ви розробляєте навігаційне меню за допомогою CSS, вам слід починати з HTML-коду, який залишається придатним для використання без CSS ("витончена деградація") і який перероблений лише за допомогою CSS.

Початковою точкою навігаційного меню є список посилань у навігаційному тегу:

Без CSS список відображається як звичайна демонстрація.

Вертикальне меню

За допомогою CSS ви можете перетворити його у вертикальне меню.

По-перше, тип стилю списку: жоден не перетворює елемент списку li на звичайний день.

Саме посилання a стає блокоутворюючим елементом з display: block. Це має ту перевагу, що цілий прямокутник діє як посилання, а не лише текст.

Фактична ланка перетворюється на елемент, що утворює блок. Потім можна клацнути весь прямокутник, а не лише сам текст

Горизонтальне меню

За допомогою flex можна також відобразити меню горизонтально. Напрямком flex-direction за замовчуванням є рядок і, отже, горизонтальне меню.

Адаптивна навігація з меню бургерів

Горизонтальні навігаційні меню погано підходять для дуже малих пристроїв виведення, таких як смартфони. Там ви зменшуєте меню навігації до однієї кнопки, яка потім відображає або приховує меню навігації:

Три вертикальні лінії часто використовуються як символи для цього типу меню, також відомого як піктограма гамбургера.

PHP для меню навігації

Меню навігації, звичайно, має бути однаковим на всіх сторінках сайту. Це можна зробити, скопіювавши код у всі файли HTML. Якщо тоді ви хочете вставити нову сторінку, вам доведеться відредагувати всі сторінки ще раз.

Тож має сенс скористатися цією можливістю, щоб перейти з простого HTML на PHP. PHP - це мова програмування на веб-сервері, з якою ми будемо інтенсивно мати справу в літньому семестрі.

Для перетворення всі файли HTML повинні мати закінчення .php, в навігаційному меню це виглядає так:

Меню навігації тепер зберігається в окремому файлі, наприклад, navi.php. Потім меню інтегрується на окремі сторінки, включаючи:

Сторона сервера

Інкульований файл вставляється на сервер. Клієнт отримує повний документ HTML, включаючи навігацію, і нічого не помічає про включення. За допомогою ПЕРЕГЛЯНУТИ → ДИСПЛЕЙУВАТИ ТЕКСТ СТОРІНКИ ви не бачите код PHP.

Результат

Зараз дуже легко вставити новий пункт меню в меню навігації: потрібно редагувати лише файл navi.php.

розділ

• Інтернет та html
  • Коротка історія всесвітньої павутини
  • Три стандарти визначають Інтернет
  • БНФ
  • Базовий курс HTML
  • Завантажити та інструменти
• Css
  • Коротке введення таблиць стилів
  • Синтаксис CSS
  • Важливі властивості
  • Спрайти CSS
  • Селектори CSS
• Розмітка CSS
  • Рамки
  • Чуйний дизайн
  • CSS для макета
  • Деталі щодо макета
  • Меню навігації
  • Детально селектори CSS
• URL-адреси
  • Абсолютна та відносна URL-адреси
  • Конфігурація веб-сервера
  • Прагматичні поради
• Форми
  • Форми
  • Форма як взаємодія
  • CSS і форма
  • відправити дані
  • Форма та PHP
  • Форма та Javascript
• Javascript Dom
  • фони
  • Витончена деградація
  • Основний Javascript
  • DOM
  • 2D полотно
  • форму++
• Jquery
  • Ненав’язливий Javascript
  • Витончена деградація
  • Спеціальне написання Javascript у jQuery
  • Вибір та маніпулювання за допомогою jQuery
  • Взаємодія з jQuery
• Командний рядок
  • Командний рядок
  • Де я
  • Права доступу
  • Зображення та відео
• Git
  • Контроль версій
  • Простий робочий процес у Git
  • Запитати про статус Git
  • Інструменти для Git
  • Відкритий та приватний ключ
• Http
  • TCP/IP і DNS
  • HTTP
  • Інструменти
  • Приклади
  • PHP не просто генерує HTML
• Підготовка Php
  • Що таке php Що відбувається на веб-сервері?
  • Апачі
  • Перша програма PHP
• Php
  • Попереджувальне повідомлення
  • Синтаксис PHP
  • Файли та папки в PHP
  • PHP та електронна пошта
  • Обробляти дані з веб-форм у PHP
  • Завантаження файлу
  • Завантаження файлу - інтерфейс
  • Помилки + налагодження
• Php db читання
  • Бази даних
  • PHP та база даних
  • Структура веб-програми
  • Зчитування з бази даних
  • Ефективна робота з БД
• сесія
  • Печиво
  • Сесія та логін
• Php db лист
  • Веб-програма з доступом до запису
  • Ясно
  • Вставити
  • Редагувати дані
  • Обробка помилок
  • Дозволити HTML
• Оптимізація Php db
  • Покажчики
  • Обмеження
  • Зміни в базі даних
  • Операції
  • Транзакції та PHP
• графічний
  • HTML + CSS для графіки
  • Піксельні зображення
  • SVG - векторна графіка
  • 2d полотно
  • 3D полотно
• Javascript
  • Змінні та сфера дії
  • Функції та це
  • Об'єкти + класи
  • Функції та закриття
  • Модулі
  • Стиль + поради
  • Налагодження
• Застосовані Js та Css
  • Перевірте дані форми
  • Виправлений заголовок з анімацією
  • Прокручуйте повільно
  • карта
  • Динамічна форма
  • AJAX
  • AJAX неправильні шляхи
  • КОРОБКИ
  • Веб-розетки чату
• Джсон
  • Синтаксис JSON
  • JSON та PHP
• Xml
  • Що таке XML
  • добре сформований XML
  • DTD
  • XML та PHP
  • XML та Javascript
  • XPath
  • Приклад RSS
• Безпека
  • А1 - ін'єкція
  • А2 - автентифікація
  • A3 - Конфіденційні дані
  • A4 - XXE
  • A5 - контроль доступу
  • A6 - неправильна конфігурація
  • A7 - XSS
  • A8 - Десериалізація
  • Компоненти A9
  • A10 - моніторинг
  • Небезпечне пряме посилання на об’єкт
  • CSRF
  • Перенаправлення
• Wordpress
  • Що таке wordpress
  • Коротка інсталяція Wordpress
  • Безпека
  • Бекенд огляду
  • Дописи та сторінки
  • ЗМІ
  • Використовуйте теми, бічні панелі та віджети
  • Використовуйте плагіни
  • Постійні посилання
• Апачі
  • Налаштуйте
  • Аутентифікація
  • Перепишіть
• Розширений Javascript
  • Функція виклику
  • Події та закриття
  • Прототипи + успадкування
  • Регулярні вирази
• мобільний
  • Чуйний дизайн
  • Прогресивна веб-програма
  • Кордова
• Якість
  • Доступність
  • конфіденційність
  • продуктивність
  • Відпочинок

опублікована під Creative Commons by-nc-sa у 2012-2019 роках Бріжитт Джеллінек.

Для подальшого розвитку цієї сторінки: fork-проект або коментар на цій сторінці

---