В этом тексте вы увидите, как можно создать навигационное меню в стиле приложения, т.е. того же вида и формы, которые используются в различных мобильных приложениях или, например: как Instagram что он использует. Такое меню мы создадим на адаптивной версии сайта для мобильных устройств с помощью Elementor.
Меню навигации
Первое, что нужно сделать, это добавить простую секцию. Затем добавьте заголовок и значок над заголовком и выровняйте их по центру. Для того чтобы он хорошо смотрелся на мобильных устройствах, предварительно поэкспериментировав, необходимо установить размер иконки на 25, а заголовка на 11, конкретно в этом случае, и в зависимости от темы изменить цвет, чтобы он сочетался с остальной частью сайта. После этого отрегулируйте расстояние между значком и текстом так, чтобы оно не было слишком большим, то есть в разделе под опцией Место для виджета (px) необходимо установить 0 в коде опции Ширина столбца (%) установите 20, если у вас будет 5 пунктов меню.
После этого вы можете скопировать раздел 5 раз или столько раз, сколько вам нужно, а затем просто изменить значки и текст под значком в зависимости от вашего меню. Вы можете выбрать значки из библиотеки или добавить свои собственные, не стесняйтесь экспериментировать с ними, и на данный момент меню должно выглядеть следующим образом.
И вот, вы создали навигационное меню, похожее на приложения, теперь вам нужно просто скинуть его в низ сайта и закрепить на этом месте, чтобы оно не двигалось. Если вы хотите закрепить меню вверху страницы и видеть его постоянно при прокрутке страницы, вам необходимо сделать следующее. При настройке раздела включите переключатель Эффекты прокрутки и по выбору Липкий оставьте его включенным только для мобильных устройств, если это ваша цель.
Для того, чтобы закрепить навигационное меню внизу сайта, можно сделать не так, а следующим образом. Вам необходимо добавить 2 строки кода в раздел «Пользовательский CSS», который вы видите на изображении ниже, и перед этим вам необходимо увеличить Z-индекс, скажем, до 10, чтобы ваше меню не исчезало. Также необходимо расширить раздел так, чтобы меню было на всю ширину страницы, а это достигается включением переключателя на опции Макет под именем Секция растяжения. Как вы видите на изображении ниже, меню переместилось в нижнюю часть страницы.
Надеюсь, этот текст был вам полезен и вы узнали что-то новое. Если вам интересно почитать больше советов по самостоятельной работе, вы можете ознакомиться с ними на нашем сайте. блог, а если вы хотите проконсультироваться со специалистами, нажмите здесь связь.
Источник: ютуб
