Рубрики
Без рубрики

Как создать отзывчивое скользящее меню

PraShant Yadav Как создать отзывчивые скользящие меню, запустите блог с именем Nearnersbucket.com, где я пишу о ES6, структурах данных и алгоритмы, чтобы помочь другим собеседованиям кодирования. Следуй за мной в Twitter для регулярных обновлений. Когда я разработал свой блог с мобильным подходом, Я решила

Автор оригинала: FreeCodeCamp Community Member.

Прашант Ядав

Я запускаю блог по имени Nearnersbucket.com Где я пишу о ES6 , Структуры данных и Алгоритмы Чтобы помочь другим взломать собеседования. Следуй за мной на Twitter Для регулярных обновлений.

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

Это простая версия того, как выглядит мое мобильное меню.

Вот как вы можете создать собственное меню навигации отзывчивого бокового панели.

Обзор

Прежде чем мы перейдем к разработке меню, давайте представим, какие компоненты нам нужны.

  • Гамбургер ? Кнопка, которая будет S как/ h IDE. скользящее меню.
  • Анимация на кнопке гамбургера для представления текущего состояния меню.
  • Меню навигации на навигации.

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

Зависимости

Мне нравится использовать jQuery для Дом Манипулирование как это уменьшает количество кода, которое мне нужно написать.

Кнопка гамбургера

HTML-структура

Существует простой трюк для создания меню гамбургера.

Мы собираемся использовать IV> W Это .ham Класс Burger, чтобы создать обертку кнопки гамбургера. Тогда мы будем размещать Три s для создания слоев гамбургера.

Проектирование кнопки гамбургера

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

Как мы создаем кнопку гамбургера с фиксированной размерностью, мы собираемся предоставить фиксированные размеры к обертке.

  • Мы создали фиксированный родитель .hamburger {положение: фиксированный} Чтобы поместить его везде, где мы хотим на экране.
  • Тогда мы разработали все > S как маленькие прямоугольные коробки С позицией: AB растворенное.
  • Как нам нужно показать три разных полоса, которые мы изменили верхнюю позицию 2-го пространства .Hamburger> Span: Nth-Child (2) {Top: 16px ; } & 3RD SP .Hamburger> Span: Nth-Child (3) {Top: 2 7px; }
  • Мы также предоставили переход: все .25S облегчает; ко всем проманам, так что изменение их свойств должно быть гладким.

Открытие и закрытие кнопки гамбургера с jQuery

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

.Hamburger.Open> Span: Nth-Child (2) {преобразование: Translatex (-100%); Непрозрачность: 0;} скользит среднюю полосу гамбургера влево и сделать его прозрачным.

.hamburger.Open> Span: Nth-Child (1) {преобразование: Rotatez (45DEG); Топ: 16px ; } & .hamburger.Open> Span: Nth-Child (2) {преобразование: Rotatez (-45DEG); Вершина: 1 6px; } принесет первый и последний промежуток в ту же верхнюю позицию и повернуть их, чтобы сделать X.

Kudos? У нас есть наш гамбургер? Кнопка готова, поэтому давайте создадим боковую навигацию сейчас.

Отзывчивый меню навигации

HTML-структура

Мы создадим простое меню навигации.

Мы использовали NAV Элемент для создания меню навигации и разместил ссылки в UL Отказ

Проектирование меню навигации

Я создал полноэкранное меню бокового меню, вы можете изменить размеры в соответствии с вашими потребностями. Мы используем & GT; Селектор, чтобы избежать перезаписи стиль других элементов.

Теперь у нас есть наше меню навигации и кнопка гамбургера, поэтому мы можем обернуть их внутри обертки, чтобы сделать их функциональными.

Меню скольжения навигации

HTML-структура

Мы разместили кнопку гамбургера и меню навигации внутри .mobile-menu обертка

Проектирование скользящего навигационного меню

Мы немного обновили дизайн, предоставляя некоторое свойство .hamburger к .mobile-menu делает его исправленным и сделанным .hamburger относительно сохранить > Дизайн то же самое.

Как можно несколько NAV S, мы обновили все селекторы .mobile-menu> NAV, а также убедиться, что мы указываем на требуемые элементы только.

Создание меню боковой панели функционалом с jQuery

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

Наши CSS для анимации также обновляется соответственно.

Отличная работа ??? Мы все охватывали.

Проверьте рабочую демонстрацию здесь

Заключение

Этот пост был о простом скользящем меню. Я пытался разбить его на разные компоненты, чтобы вы могли использовать их самостоятельно.

Спасибо за терпение во время прочтения этого. Если вы узнали что-то новое сегодня, то дайте немного? Кроме того, поделитесь этим со своими друзьями, чтобы они могли узнать что-то новое.

Вот и все, следуй за мной на Twitter для обмена знаниями. Я пишу о ES6 , Nodejs, Структуры данных & Алгоритмы И полный стек веб-разработки с JavaScript.

Первоначально опубликовано learnersbucket.com 14 апреля 2019 года.

Оригинал: “https://www.freecodecamp.org/news/how-to-create-a-responsive-sliding-menu-97b90852a455/”

Читайте ещё по теме: