Перейти к содержимому


Однострочный Подвижный Список Категорий Товаров В Шапке


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 03 Январь 2016 - 10:49

Добрый день!

Можно ли реализовать скроллируемый однострочный список категорий товаров в шапке?

Вот как сейчас:

Catalogue_1.jpg

Собрать их в одну строку:

Catalogue_2.jpg

А чтобы не было так, что она обрежется или выйдет за границы или будет некрасиво, сделать так, чтобы она могла крутиться влево-вправо в зависимости от положения мышки на поле категорий товаров:

Catalogue_3.jpg

Это, к тому же, дало бы возможность стилизовать кнопки в будущем.

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 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;
}

А у меня так всё меню пропало.

Меню.png

Не могу оставить это для изменения и просмотра, добавляю ещё товары. И не знаю когда поможете. Восстановил тему.

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Andrew S.

Andrew S.

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 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 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Февраль 2016 - 04:08

Из изменений выставлена минимальная высота блока в 50px, судя по скриншоту высота блока 0, задали ее вручную.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных