Разработка моего сайта. Часть 6. Адаптация меню для мобильных устройств.

Автор Lyudmila Yeriomenko
Разработка моего сайта. Часть 6. Адаптация меню для мобильных устройств.

Здравствуйте.

Здравствуйте в предыдущем видео мы делали меню чтобы она остановилась нас по центру адаптировали для того чтобы смотрелось надо в том-то версиях до 100 на сегодня мы будем делать так чтобы меня установилось у нас ровно на планшетных и мобильных устройствах отлично. Сегодня мы. Наверное сделаем только меню гамбургер подставим сюда и сделаем так чтобы у нас именно в точках остановки когда.

Красная цена меньше определенного значения.

У нас вот — это меня и. Сюзанна и появлялось меню гамбургер что. Начнем с того, что найдём первоначально на сайте Flat Icon Flat icon нужно нам иконка меню смотрим какие нам интересно меню отменю отлично посмотрим какая подходит. Так какой бы я хотел нужно такие примерно линии закрыть закруглённые. Ну примерно такая сейчас её попробуем понравиться она или нет так скачиваю моя белого цвета скачаем формате PNG на нагревание 64А посмотрим сколько у нас тут по-хорошему 40 40 на 40 она будет примерно очень всё сразу добавляем этом иконка vonage наш папку Image и теперь нам надо найти иконку добавить в верстке, что мы делаем мы заходим в хедер и там где у нас номер телефона добавляем div с классом Mobile меню на. Пускай называется Mobile и добавим сюда картинку которая будет, а нет мы сюда сразу добавил в. ЧС добавлять г. иваси добавил путь так вот так вот путь до нашей эры до нашего изображения изображения меню так фон PNG. Так у меня батон. Так удаляем вот здесь добавляем название и надо проверить результат появилась у нас что-нибудь — это немножечко собьётся жестком так — это что-то вообще всё сбила проверим. А да. Потому, что я в атрибуте Alt — это прописала него attribute src всё верно стоимость. Россия сохраняем и смотрим результат, что у нас получилось. Да вот у нас появился такой большое меню нам нужно его уменьшить примерно от под размер вот — это вот фото логотипа посмотрим сколько нас логотипы сделаем наверное такой же самый не логотипы на высоту 40 пикселей значит здесь нужно сделать 40 пикселей берём plasma Mobile Menu его будем сейчас редактировать CSS когда with studying 40 пикселей. Какие высоту дадим 40 пикселей посмотрим, что у нас получается да вот такая аккуратная меню только моё не туда положили потому, что он он должен лежать кругом кругом теги. Мы положили в kik div с классом фон он должен самостоятельным элементом потому, что далее. Нам нужно будет скрывать, а точнее такси в наше меню так посмотрим, что у вас получилось. Да у нас получилось меню. Так я с ней сохранил. Анют смотрим ещё раз доедем отдельно положил от телефона только-только, а нет не положил ещё отдельно смотрим положил отдельно без телефона теперь нам нужно так свойство height можно убрать потому, что тогда я 100% такси — это берём. Так ведь не уберём потому, что он нам даёт растянутую картинку. Вот так вот у нас почему-то высота меня не устраивает мы дали здесь рэпер Display Flex. Олег гонцов центр нам нужно передать нашему изображению устала по центру меню хочется сделать ещё. Чуть поменьше 30 30 ладно — это мы сейчас будем смотреть именно на меньшую версии. А, что оставим как есть. Олег гонцов нам нужно дать Mobile Menu аллергоцентр со стола и теперь будем работать над тем чтобы ты нам нужна скрыть нам нужно сначала — это меню пишем дисплей Display None тем самым исключаем — это меню, но на этапе. Когда у нас переходит экран в md нам нужно уже показать. ВМД показать пишем значит наш файл cmd благ. А вот сейчас я прописываю немного нестандартные вещи для для сердце смотреть я пишу в. Леся и здесь используется. Вот специально файлом сетки Smart Grid так и примесь как блок то есть мы сейчас выбираем, что мы будем делать на определённом экране то есть вот этот экран этот экран и меньше 992 пикселей, что мы будем день его делать. И вот он до него прописываем, что нам нужно показать как минимум показать Display Block сохраняем в 5:00 так да вот она сработала вот именно когда экран становится определенного размера ножи Block показывается, а меню пока, что давайте откроем, а можно потом его нужно будет редактировать берём меню вот этот вот пишем блог имя Display None смотрим результат. Да у нас скрывается меню и появляется вот такой вот как изображение. Покажите изображение. Но нам нужно. Здесь под редактировать потому, что здесь не как-то неказиста получается магазин, тогда класса фон. Одессит flex-grow на единичку чтобы он занял justify-content justify-self селфи вроде бы дать им центра так не тот не то ладно флаг с горлом сначала передадим фон класс фон дадим благ блок — это и мы именно работаем с этим экраном и флаг с горлом, тогда всё у нас стало мне теперь можно сделать стоп наш телефон оказался по центру всегда был на виду смотрим смотрим класс фон. ВКонтакте центробой он станет по центру отлично. Вадим класса фон для контента. Сохрани и мы смотрим. Что у нас получилось. Нет мы уже видим, что наши меня уже довольно приятно выглядят. Яна версия десктопной и на версии планшетный. Да хочется немного меню уменьшить здесь спору нет хочется его наверное сделать 30 слишком далековато 30. Маловато Мне не хочется так не сохранил в 5:00. Ну ладно пускай будет меню такое ну принципе неплохо смотрится что-то я к нему прикалываюсь вот мы видим, что вот телефон посередине находятся справа меню и уже можно вот смотри даже для мобильной версии. Вот она всё замечательно смотрятся нам нужно по высоте 30 л.с. не туда по ширине сделал надо по высоте 30 сохраняем смотрим в 5.

0 комментариев
0

Читайте также