Добрый день!
Можно ли реализовать скроллируемый однострочный список категорий товаров в шапке?
Вот как сейчас:
Собрать их в одну строку:
А чтобы не было так, что она обрежется или выйдет за границы или будет некрасиво, сделать так, чтобы она могла крутиться влево-вправо в зависимости от положения мышки на поле категорий товаров:
Это, к тому же, дало бы возможность стилизовать кнопки в будущем.
0
Однострочный Подвижный Список Категорий Товаров В Шапке
Автор Andrew S., 03 янв. 2016 10:48
Сообщений в теме: 5
#1
Отправлено 03 Январь 2016 - 10:49
#2
Отправлено 12 Январь 2016 - 05:01
Реализация через стандартный браузерный скролл, в main.css найдите:
замените на:
далее найдите:
замените на:
.navSelect.nav { width: 100%; }
замените на:
.navSelect.nav { float: left; position: absolute; left: 0px; width: 1960px; }
далее найдите:
.sectionblock-container { display: inline-block; float: left; width: 88%; }
замените на:
.sectionblock-container { display: inline-block; float: left; width: 100%; overflow: scroll; position: relative; }
#3
Отправлено 18 Февраль 2016 - 01:13
Vaccina (12 Январь 2016 - 05:01) писал:
Реализация через стандартный браузерный скролл, в main.css найдите:
замените на:
далее найдите:
замените на:
.navSelect.nav { width: 100%; }
замените на:
.navSelect.nav { float: left; position: absolute; left: 0px; width: 1960px; }
далее найдите:
.sectionblock-container { display: inline-block; float: left; width: 88%; }
замените на:
.sectionblock-container { display: inline-block; float: left; width: 100%; overflow: scroll; position: relative; }
А у меня так всё меню пропало.
Не могу оставить это для изменения и просмотра, добавляю ещё товары. И не знаю когда поможете. Восстановил тему.
#4
Отправлено 18 Февраль 2016 - 02:03
Попробуйте:
заменить на:
.sectionblock-container { display: inline-block; float: left; width: 100%; overflow: scroll; position: relative; }
заменить на:
.sectionblock-container { display: inline-block; float: left; width: 100%; position: relative; overflow: scroll; height: 100%; min-height: 50px; }
#5
Отправлено 20 Февраль 2016 - 22:52
Vaccina (18 Февраль 2016 - 02:03) писал:
Попробуйте:
заменить на:
.sectionblock-container { display: inline-block; float: left; width: 100%; overflow: scroll; position: relative; }
заменить на:
.sectionblock-container { display: inline-block; float: left; width: 100%; position: relative; overflow: scroll; height: 100%; min-height: 50px; }
Подскажите, а что грозит адаптивному шаблону с такими изменениями? Там и так всё враскорячку.
#6
Отправлено 21 Февраль 2016 - 04:08
Из изменений выставлена минимальная высота блока в 50px, судя по скриншоту высота блока 0, задали ее вручную.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных