Веб развој на учебници - Мени за навигација

Учебник за изучување на компјутерски науки или медиуми-компјутерски науки.

Мени за навигација

Ако дизајнирате мени за навигација со CSS, тогаш треба да започнете од HTML код што останува употреблив без CSS („грациозна деградација“) и кој е редизајниран само со CSS.

Појдовна точка за менито за навигација е список на врски во ознака за навигација:

Без CSS списокот се прикажува како нормално Демо.

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

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

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

Самата врска станува елемент што формира блок со приказ: блок. Ова има предност што целиот правоаголник делува како врска, а не само текстот.

Вистинската врска е направена во елемент што формира блок. Потоа може да се кликне на целиот правоаголник, не само на самиот текст

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

Со помош на flex можете исто така да го прикажете менито хоризонтално. Стандардната насока на правецот на свиткување е ред, а со тоа и хоризонтално мени.

Одговорна навигација со мени со плескавици

Мени за хоризонтална навигација не се соодветни за многу мали излезни уреди, како што се паметни телефони. Таму го намалувате менито за навигација на едно копче, кое потоа го прикажува или крие менито за навигација:

мени

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

PHP за мени за навигација

Менито за навигација секако треба да биде исто на сите страници на страницата. Ова може да се направи со копирање на кодот во сите HTML-датотеки. Ако тогаш сакате да вметнете нова страница, мора повторно да ги уредите сите страници.

Значи, има смисла да ја искористите оваа можност да преминете од едноставен HTML во PHP. PHP е програмски јазик на веб-серверот со кој интензивно ќе се занимаваме во летниот семестар.

За конвертирање, сите HTML-датотеки мора да имаат крај .php, во менито за навигација изгледа вака:

Менито за навигација сега е зачувано во посебна датотека, на пример, navi.php. Потоа, менито е интегрирано во одделните страници со вклучено:

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

Вметнатата датотека е вметната на серверот. Клиентот го прима комплетниот HTML документ вклучувајќи навигација и не забележува ништо во врска со вклучувањето. Со ТЕКСТ ЗА ИЗВЕШТАЈ НА ПОГЛЕДНАТА СТРАНИЦА не можете да го видите PHP-кодот.

развој

Резултат

Сега е многу лесно да вметнете нова ставка во менито за навигација: само датотеката navi.php треба да се уреди.

поглавје

  • Интернет и html
    • Кратка историја на светската мрежа
    • Три стандарди ја дефинираат мрежата
    • БНФ
    • HTML основен курс
    • Поставување и алатки
  • Css
    • Кратко воведување на стилови
    • Синтакса на CSS
    • Важни својства
    • CSS духови
    • Избирачи на CSS
  • Распоред на CSS
    • Рамка
    • Одговорен дизајн
    • CSS за изгледот
    • Детали за изгледот
    • Мени за навигација
    • Детално избирачи на CSS
  • Урлови
    • Апсолутни и релативни URL-адреси
    • Конфигурација на веб-сервер
    • Прагматични совети
  • Формулари
    • Формулари
    • Форма како интеракција
    • CSS и форма
    • испрати податоци
    • Форма и PHP
    • Форма и Javascript
  • Javascript Дом
    • потекла
    • Благодатна деградација
    • Основен Javascript
    • ДОМ
    • 2Д платно
    • форма++
  • Quекери
    • Ненаметлив Javascript
    • Благодатна деградација
    • Специјално пишување на Javascript во jQuery
    • Избирање и манипулирање со jQuery
    • Интеракција со jQuery
  • Командна линија
    • Командна линија
    • Каде сум
    • Права на пристап
    • Слика и видео
  • Гит
    • Контрола на верзијата
    • Едноставен работен тек во 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 - векторска графика
    • 2д платно
    • 3д платно
  • Javascript
    • Променливи и опсег
    • Функции и ова
    • Предмети + часови
    • Функции и затворања
    • Модули
    • Стил + совети
    • Дебагирање
  • Применети Js и Css
    • Проверете ги податоците за формуларот
    • Фиксиран заглавие со анимација
    • Појдете полека
    • мапа
    • Динамична форма
    • АЈАКС
    • AJAX погрешни начини
    • КОРС
    • Разговор веб-сокет
  • Sonсон
    • Синтакса на JSON
    • JSON и PHP
  • Xml
    • Што е XML
    • добро формиран XML
    • ДТД
    • XML и PHP
    • XML и Javascript
    • XPath
    • Пример RSS
  • Безбедност
    • А1 - Инјекција
    • А2 - автентикација
    • A3 - Чувствителни податоци
    • А4 - XXE
    • A5 - контрола на пристап
    • A6 - погрешна конфигурација
    • А7 - XSS
    • A8 - десериализација
    • А9 компоненти
    • А10 - мониторинг
    • Упатување на небезбеден директен предмет
    • ООП
    • Пренасочува
  • Вордпрес
    • Што е WordPress
    • Кратка инсталација на Вордпрес
    • Безбедност
    • Преглед заднина
    • Објави и страници
    • медиуми
    • Користете теми, странични ленти и додатоци
    • Користете додатоци
    • Permalinks
  • Апаши
    • Конфигурирај
    • Автентикација
    • Преработи
  • Напреден Javascript
    • Функција за повик
    • Настани и затворање
    • Прототипови + наследство
    • Редовни изрази
  • мобилен
    • Одговорен дизајн
    • Прогресивна веб-апликација
    • Кордова
  • Квалитет
    • Пристапност
    • приватност
    • изведба
    • ОДМОР

објавено под Криејтив комонс од страна на nc-sa во годините 2012-2019 од страна на Брижит Јелинек.

За понатамошна развој на оваа страница: проект за вилушка или коментар на оваа страница