работа в css. Практическая работа №23. Создание анимированной навигации

• Название: Создание анимированной навигации
• Анкор: работа в css
• Дата: 01.11.2021
• Размер: 177.6 Kb.
• Имя файла: Практическая работа №23.docx
• Тип: Занятие; #260423

Практическое занятие №23

Тема: Создание анимированной навигации

Цель работы: Создание анимированной навигации средствами CSS Приобретаемые умения и навыки: Умение работать с СSS

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

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


Наша навигационная панель работает следующим образом: Помимо стандартного отображения меню сайта при необходимости меню можно свернуть нажав на значок крестика, чтобы увеличить рабочее пространство сайта.
Ход работы

Файл HTML
Мы создадим HTML файл в который поместим контейнер

(тег

является контейнером для навигации - группы ссылок, ведущих на другие страницы сайта ) с классом active и также укажем id c значением nav. Далее в этот контейнер мы поместим список состоящий из четырех пунктов: Home, Works, About, Contact которые будут являться ссылками на бедующие страницы сайта.
Также в этом контейнер

тег button (кнопка) с классом icon и id со значением toggle. В кнопку мы поместим два пустых контейнера div с классом line line1 и line line2. Они нам будут нужны для сворачивания и разворачивания нашего меню.
Отдельно мы поместим небольшой скрипт языка JavaScript который будет отвечать за сворачиваемость: . Он будет располагаться в отдельной файле.
После написания HTML файла у вас должен отобразиться список с кнопкой

Файл CSS

Теперь давайте займемся CSS! Для начала мы подключим шрифт для нашей навигации, используем для этого мы напишем следующие:
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
Далее мы с вами наберем следующий код который буде отвечать за фоновый внешний вид нашей страницы.



Следующим шагом мы с вами будем создавать область под навигационное меню:




Нам нужно расширить нашу область поэтому мы зададим следующую настройку:

И получим такой результат:


Полученная область получилась слишком громоздкая, поэтому мы её сделаем более миниатюрной, и одновременно с этим поправим наш список используя для тега nav и ul следующие настройки:


Навигационная область стала аккуратнее, теперь давайте разберемся с пунктами меню:


Далее мы займемся настройкой движения нашего меню:

Следующим шагом мы оформим надписи нашего меню, чтобы они были более симпатичные:



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

Теперь давайте нарисуем значок меню который будет отображаться на нашей панели




Последним шагом нашего оформления навигационной панели будет создания значка «закрыть меню». Для этого мы используем следующий код:




Доп. Задание: с помощью комментариев в коде практической работы поясните какой код за что отвечает!