[Урок 7] Создаём сайт на стандартных блоках (часть 3)

Всем привет! В прошлом уроке мы практически сделали главный блок сайта, но так и не разобрались с меню. Сегодня мы закроем этот вопрос, а именно : отредактируем настройки меню, добавим нужные пункты, поменяем логотип и наконец-то закончим с главным блоком. Погнали!

Сейчас меню выглядит как-то так. Согласитесь, нужно его изменить. Для этого переходим в настройки блока меню и приступаем к работе.

Основные настройки

Здесь всё приблизительно так же, как и в основных настройках блока обложки.

Позиционирование меню :

Статика - меню стоит на месте

С наложением на следующий блок, но без фиксирования - меню накладывается на блок обложки, но всё по-прежнему остаётся на месте при прокрутке страницы.

Фиксация при скролле - при прокрутке страницы меню остаётся сверху страницы

Выберем второй вариант с наложением меню на следующий блок.

Высота меню

Тут больших объяснений не нужно. В пикселях устанавливаем высоту менюшки. Давайте установим 80px.

Появление меню при прокрутке через N пикселей

Данный параметр уже интереснее. Работать он будет только если установить фиксированное позиционирование.

Меню будет появляться после того, как посетитель сайта открутит определённое количество пикселей вниз. Мы трогать этот параметр не будем, опять вернёмся к нему позже, когда сайт будет готов.

Ставим две галочки и переходим к дальнейшим настройкам.

Цвет фона меню

Цвет фона по умолчанию стоит чёрный, а непрозрачность в режиме "по умолчанию".

Ставим показатель непрозрачности меню на 0%.

Давайте посмотрим, что дали нам параметры цвета фона + наложение на блок обложки.

Отлично! Но логотипа точно не хватает...

Пункты меню

Настройки регулирующие отображение самих пунктов меню.

Количество пунктов меню слева от логотипа - поставим значение 4. Это значит, что слева от логотипа будет 4 пункта и справа соответственно.

Цвет пунктов меню - по умолчанию стоит белый, таким его и оставим

Расстояние между пунктами меню - так же оставим по умолчанию

Размер текста пунктов - стоит по умолчанию 20px, но мы сделаем чуть меньше и поставим 16px

Данный раздел пока что оставим в покое и перейдём к следующему.

Логотип

Если логотип текстовый, то здесь мы можем поменять параметры его типографики. Цвет, размер, шрифт и так далее. Мы же будем добавлять готовое лого, поэтому данный раздел нам не нужен.

Ждём сохранить и закрыть и переходим в раздел "Контент"

Список пунктов меню

Заполняем пункты меню. Я добавлю сюда :

  1. Контакты
  2. О нас
  3. Где мы
  4. История
  5. Мероприятия
  6. Наш instagram
  7. Бронь столика
  8. Меню

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

Логотип

Убираем текст "Company", выбираем файл с изображением логотипа.

Можем указать ссылку, на которую будет переход, при клике на логотип.

Внимание! Логотип, как и многие другие векторные изображения рекомендую вставлять в формате .svg!

Сам лого прикреплю под постом.

Дополнительно

Здесь мы можем ввести название меню на мобильных устройствах, но делать мы этого не будем, так как телефонах менюха будет другая.

Жмём кнопку "Сохранить и закрыть" и делаем предпросмотр сайта!

Итог, главный блок сайта готов! Меню тоже на месте)

Не забывайте подписываться на канал, чтобы получать новые уроки! Всем продуктивного карантина.