Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Верстка горизонтального верхнего меню


Верстка горизонтального верхнего меню

Верстаем верхнюю полосу сайта, в которой будет логотип, меню сайта и телефон.

Заходим в index.html чистого шаблона gulp.

Начинаем писать код в теге body, задаем header с классом m-head.

Вся линия top-line будет внутри bootstrap контейнера с классом row, разделенная на три колонки.

Все колонки будут лежать внутри дива с классом top-line.

Для логотипа будет две колонки col-md-2, для меню 7 колонок col-md-7 и у телефона col-md-3.

  1. Задаем логотип как ссылка, с тегом img, укажем путь до картинки и пропишем alt.
  2. Все меню делают в теге nav, добавим класс menu. Меню это список li, все пункты положим в тег li. Первый пункт будет активный с классом active.
  3. Делаем див с классом phon для всего блока с телефоном, для иконки телефона шрифтом font awesome и номера делаем обертку с классом wrap. Под телефоном делаем ссылку на заказ обратного звонка, форму добавим потом.

Код index.html.

Сделаем transition через переменные, зайдем в vars.sass и добавим .

Код vars.sass.

Эту переменную будем использовать везде.

  • Знак равно потому, что в sass так обозначается @mixin.
  • Миксин вызывается @include или это знак плюс + в том месте куда добавим переменную.

Стилизуем top-line в main.sass.

Зададим фон у m-head картинкой.

Растянем изображения на всю ширину экрана min-height: 100vh.

При уменьшение экрана фон остается одинаковый, установим для экрана все пространство background-size: cover.

Чтобы вверх изображения прилипало к вверху зададим background-position: top center.

Всю верхнюю линию top-line сделаем пониже padding-top: 30px. Перейдем к стилизации логотипа.

  1. Логотип logo будет блочным элементом display: block с фиксированной шириной width: 100px. Внутренний элемент img будет width: 100%.
  2. В навигации nav у ul не будет точек сбоку list-style-type: none, уберем отступы. Для li сделаем в одну линию свойством display: inline-block. Оформим класс menu, сперва установим меню по центру text-align: center. У всех ссылок установим display: block и расстояния между пунктами меню установим padding: 10px 20px. Сделаем плавное изменение цвета при наведении переменной +mt (.5s), позже ее добавим в vars.sass. При наведении мышкой на пункт &:hover будет меняться цвет. Также будет третий цвет у ссылки, которая с классом активна &.active.
  3. Установим телефон phon по правому краю text-align: right. Для обертки wrap телефона и иконки сделаем жирный шрифт. Размер шрифта зададим в em это размер от шрифта у тега body font-size: 1.3em. Для иконки телефона fa применим position: relative и смещение от верха top: 2px. Отступ от номера до иконки margin-right: 10px. Класс call сделаем подчеркнутой линией border-bottom: 1px dashed red. Поближе линию сделаем путем добавления свойства display: inline-block и подберем line-height: 18px. При наведении мышкой сплошная линия будет пропадать text-decoration: none и подчеркнутая тоже border-bottom: transparent. Цвет ссылки станет красным.

Код в main.sass.

Делаем top-line адаптивный под разные экраны.

На больших экранах lg меню будет, на более меньших будет срывать свойсвом hidden-md, hidden-sm и hidden-xs прописываем в класс menu. Проверим как получилось в браузере.

Делаем top-line адаптивный под разные экраны.

Теперь сделаем замену меню для маленьких экранов с классом toggle-mnu и скрывать на больших экранах hidden-lg. Меню сделано как черный квадратик. Подробно о toggle-mnu.

Комментариев нет