Уеб разработка на учебници - Навигационно меню

Учебник за изучаване на компютърни науки или медийно-компютърни науки.

Меню за навигация

Ако проектирате навигационно меню с CSS, тогава трябва да започнете от HTML код, който остава използваем без CSS ("изящна деградация") и който е преработен само с CSS.

Началната точка за меню за навигация е списък с връзки в навигационен таг:

Без CSS списъкът се показва като нормална демонстрация.

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

С CSS можете да го превърнете във вертикално меню.

Първо, тип стил на списък: никой не превръща елемента от списъка li в нормален ден.

Самата връзка става блокообразуващ елемент с display: block. Това има предимството, че целият правоъгълник действа като връзка, а не само текстът.

Действителната връзка се превръща в блок-формиращ елемент. След това може да се щракне върху целия правоъгълник, а не само върху самия текст. Демонстрация

Хоризонтално меню

С помощта на флекс можете да покажете менюто и хоризонтално. Посоката по подразбиране на flex-direction е ред и следователно хоризонтално меню.

Отзивчива навигация с бургер меню

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

Три вертикални линии често се използват като символи за този тип меню, известен също като иконата за хамбургер.

PHP за меню за навигация

Менюто за навигация, разбира се, трябва да бъде еднакво на всички страници на сайта. Това може да стане чрез копиране на кода във всички HTML файлове. Ако след това искате да вмъкнете нова страница, трябва да редактирате всички страници отново.

Следователно има смисъл да се възползвам от тази възможност, за да премина от обикновен HTML към PHP. PHP е език за програмиране на уеб сървъра, с който ще се занимаваме интензивно през летния семестър.

За да конвертирате, всички HTML файлове трябва да имат окончанието .php, в менюто за навигация изглежда така:

Менюто за навигация вече се записва в отделен файл, напр. navi.php. След това менюто се интегрира в отделните страници с:

Сървърна страна

Инкулираният файл се вмъква на сървъра. Клиентът получава пълния HTML документ, включително навигация, и не забелязва нищо за включването. С VIEW → DISPLAY PAGE SOURCE TEXT не можете да видите PHP кода.

Резултат

Сега е много лесно да вмъкнете нов елемент от менюто в менюто за навигация: трябва да се редактира само файлът navi.php.

глава

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

публикувано под Creative Commons by-nc-sa в годините 2012-2019 от Brigitte Jellinek.

За по-нататъшно развитие на тази страница: fork проект или коментар на тази страница

---