Панель для мобильных

InstantCMS 2.X
#1 10 апреля 2022 в 00:08

Уже несколько раз при верстке шаблонов для 2ки для большей гибкости в мобильной версии была использована панель для мобильных — «прибитая» внизу плашка с иконками. Примерно такая

Изображение

Было решено сделать более/менее универсальный компонент для использования такой панели в шаблоне modern и дочерних.

Для тестов организовал два демо demo.bergorod.ru/catalog и demo.bergorod.ru/pages/rules.html

И демо с 5 иконками для примера demo.bergorod.ru/pages/about.html

Подробное описание, как все устроено на демо есть по ссылке

ИзображениеИзображениеИзображениеИзображение

Панель для мобильных
Компонент

Панель для мобильных

Демо Купить 500 руб.

#2 10 апреля 2022 в 01:22

Сделал с помощью инструментов движка без доп компонентов 

ИзображениеИзображение

#3 10 апреля 2022 в 02:42

Уже несколько раз при верстке шаблонов для 2ки для большей гибкости в мобильной версии была использована панель для мобильных — «прибитая» внизу плашка с иконками. Примерно такая

Изображение

Было решено сделать более/менее универсальный компонент для использования такой панели в шаблоне modern и дочерних.

Для тестов организовал два демо demo.bergorod.ru/catalog и demo.bergorod.ru/pages/rules.html

Подробное описание, как все устроено на демо есть по ссылке

ИзображениеИзображениеИзображениеИзображение

До размещения в официальном каталоге (разработка будет платной) был бы рад услышать мнения/пожелания.

Zau4man

Отличная тема. Так же совет, сделать фиксированную высоту вложений и возможность скролла в выпадающем списке меню, а то при открытие вложенных пунктов полностью вся страница перекрывается. Либо чтобы при раскрытие списка как страница меню как бы переезжает в подпунктыИзображение

#4 10 апреля 2022 в 16:32

Сделал с помощью инструментов движка без доп компонентов

Happy

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

а то при открытие вложенных пунктов полностью вся страница перекрывается

CEH9I

сейчас размер панели боковой уже ограничен в max-height: 80vh. Можете для себя уменьшить еще

как страница меню как бы переезжает в подпункты

CEH9I

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

#5 10 апреля 2022 в 20:53

Я уже поднимал подобную тему — создать меню как на вб, инсте и т.д.

В данный момент у меня организованно оно, но пока не до конца по дизайну. 

Изображение

Добавлено спустя 44 минуты

По хотелкам.

Лично для меня играет роль шаринга. Если сделаете в меню такую кнопку с возможностью выводить или нет, то супер))) заказывал Make данную фичу, работает отлично! Только с приложения тупит, там не хватает видимо библиотек, а с pwa и с браузера работает на ура! 

#6 12 апреля 2022 в 14:47

Сделал с помощью инструментов движка без доп компонентов 

ИзображениеИзображение

Happy

Красота! Краткая инструкция «как повторить» не помешала бы. )))

Добавлено спустя 14 минут

До размещения в официальном каталоге (разработка будет платной) был бы рад услышать мнения/пожелания.

Может конечно не по теме, но было бы хорошо по итогу получить комплексное решение. Модерну очень не хватает шапки в подобном стиле с нормальным выезжающим сбоку меню как уже все привыкли. И решение «Шапка + мобильный бар 2 в 1» было бы на мой взгляд отличным.

#7 13 апреля 2022 в 09:44

При поддержке CEH9I добавлена возможность вместо иконки выводить аватар

Изображение

ИзображениеИзображение
#8 13 апреля 2022 в 14:19

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

#9 14 апреля 2022 в 01:27

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

Def

Создаёте пункт меню, указываете ссылку {content:add}, добавляете виджет меню, выбираете нужное меню и все готово. 

#10 14 апреля 2022 в 18:52

Немного ответов на вопросы. 

Иконок в панели может быть больше

И 4, и 5. В панель можно добавить еще виджетов. Панель — обычная позиция для виджетов. Демо для примера с 5 иконками demo.bergorod.ru/pages/about.html

В панели можно разместить иконку личных сообщений, уведомлений

В панели можно размещать не только добавленный с компонентом виджет Кнопка. Но и другие виджеты icms. Повторюсь, панель — обычная позиция для виджетов. Легко можно сделать так

Изображение

ИзображениеИзображениеИзображение
#11 14 апреля 2022 в 21:06

Я бы скорее всего приобрел, так как мое меню не доработанное...
Но мне очень нужен шаред/поделиться, так как копировать ссылку хочется именно с этого меню)))
Могу предоставить доступы на сайт, чтоб посмотрели как мне сделал Make.

#12 15 апреля 2022 в 00:14

Я бы скорее всего приобрел, так как мое меню не доработанное...
Но мне очень нужен шаред/поделиться, так как копировать ссылку хочется именно с этого меню)))
Могу предоставить доступы на сайт, чтоб посмотрели как мне сделал Make.

skewes

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

#13 15 апреля 2022 в 12:05

Я бы скорее всего приобрел, так как мое меню не доработанное...
Но мне очень нужен шаред/поделиться, так как копировать ссылку хочется именно с этого меню)))
Могу предоставить доступы на сайт, чтоб посмотрели как мне сделал Make.

skewes

Установил скрипт от яндекса «Кнопка поделиться» в виджет html 

Изображение

При нажатии выходит вот так 

Изображение

#14 15 апреля 2022 в 20:47

rshabalin, то, что врач прописал)))
Вообще гуд)))
Значит буду брать, что поделать)))

Добавлено спустя 6 часов

Как вариант, ещё можно было бы сделать подпись иконкам. 

Изображение

#15 15 апреля 2022 в 21:47

Подписи есть. На скринах выше это фраза «Записаться»

О переносе подписей ниже иконок подумаю.

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