Это будет чтото такое (всё абстрактно):
1. есть url : /localhost/getlist/ - по этому url сервер отдаёт список (формат в данном контексте неважен)
2. На фронте вы Ajax\Сокетами при открытии навигации (или сразу при загрузке страницы) отправляете запрос на /localhost/getlist/, получаете список, обрабатываете и парсите данные как вам надо.
3. Заворачиваете подготовленные данные в шаблон и вставляете в документ (меню)
Без стилей - это только гадать.
Как вариант можно в медиа запросах использовать dpi - чтобы различить именно мобильные платформы, а *width\*height - чтобы определить размер экрана.
Например, если это не мобильное устройство и размер экрана больше чем 640 (пример), то показывать меню и подменю
Если это мобильная платформа и размер экрана больше чем 640 (планшет?), то показываем кнопку и соответственно стили для кнопки
Ankhena W: чем лучше, можно пример? Про кроссбраузерность нечего не сказано
Естественно по вопросу ТС
Существуют ли способы решения проблем с оператором + и ~ для псевдоэлементов?
Но мне обязательно нужно, чтобы p был внутри div. Так задумано. Как тогда решить?
На счёт контейнера, зависит от ситуации, несколько иконок вручную.
svg спрайт полученный от gulp-svg-sprite также содержит контейнер и все идентификаторы иконок, чаще "вставляю" в документ ... Делаю инклуд средствами гулпа
Для больших фоновых (и не только фоновых) изображений есть кеш браузера
Запрос будет, но трафик экономится. При правильно построенном фронте, запросы выполняются асинхронно. С проблемой количества запросов не сталкивался
1. есть url : /localhost/getlist/ - по этому url сервер отдаёт список (формат в данном контексте неважен)
2. На фронте вы Ajax\Сокетами при открытии навигации (или сразу при загрузке страницы) отправляете запрос на /localhost/getlist/, получаете список, обрабатываете и парсите данные как вам надо.
3. Заворачиваете подготовленные данные в шаблон и вставляете в документ (меню)