Автор Тема: Горизонтальное главное меню-вывод подкатегорий столбцом под каждым пунктом меню  (Прочитано 648 раз)

31 Март 2015, 14:23:29
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
Товарищи, помогите реализовать вывод подкатегорий столбцом под каждым пунктом меню. Шаблон default-bootsrap Prestashop 1.6.9
Как ни пытаюсь получается криво и не до конца.

Всем добра!
______________________________
skype: aka.alius
31 Март 2015, 14:24:10
Ответ #1
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
Скрин того, что у меня получилось путем неумелого ковыряния css
______________________________
skype: aka.alius
31 Март 2015, 14:38:05
Ответ #2
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22318
  • Репутация: +17114/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
31 Март 2015, 14:44:16
Ответ #3
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
Так в этом меню и так выводятся подкатегории.
Мне необходимо чтобы подкатегории выводились одним столбцом при наведении на категорию горизонтальном меню. По умолчанию категории выводятся как на скрине в приложении
______________________________
skype: aka.alius
31 Март 2015, 14:54:06
Ответ #4
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22318
  • Репутация: +17114/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
.sf-menu > li > ul {
    width: ....
}
укажите размер 20%; 30%... можно такой же как в .sf-menu > li
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
31 Март 2015, 15:02:57
Ответ #5
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
.sf-menu > li > ul {
    width: ....
}
укажите размер 20%; 30%... можно такой же как в .sf-menu > li
Вот что получается при указании размера как вы написали выше (скрин в аттаче)
Необходим в итоге один столбец и чтобы раскрывающийся список подменю подкатегорий выпадал под соответствующей категорией.  :-[
______________________________
skype: aka.alius
31 Март 2015, 16:35:56
Ответ #6
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
.sf-menu > li > ul {
  padding: 13px 15px 13px;
  width: [color=red]20%[/color]; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase;
    font: 600 8px/18px "Open Sans", sans-serif;
    color: #333; }
    .sf-menu > li > ul > li > a:hover {
      color: #515151; }

.sf-menu > li > ul > li {
  float: left;
  width: [color=red]100%[/color];
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%;
      padding-bottom: 20px; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }
Поставив выделенные значения красным в css мне удалось добиться более-менее корректного отображения подкатегорий, НО остается открытым вопрос - Как сделать так, чтобы подкатегории отображались под соответствующей категорией в меню ???
______________________________
skype: aka.alius
31 Март 2015, 17:07:07
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 1288
  • Репутация: +34/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Можно добавить position для вложенного меню.
.sf-menu > li { position: relative;...Для ul
.sf-menu > li > ul { width: 300px; /*по самой широкой ссылки*/
31 Март 2015, 17:11:27
Ответ #8
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
Вот что у меня получилось выполнив следующие шаги самостоятельно:  8) 8) 8)

1) .sf-menu > li {
     position:relative;
     ......
Этим шагом я сделал так, чтобы выпадающее меню выпадало непосредственно под соответствующей категорией

2) .sf-menu > li > ul > li {
     width:100%;
     ......
Этим шагом определяем кол-во столбцов в выпадающем меню (100%- один; 50% - два; 25%-четыре;)

3) .sf-menu > li > ul {
     width:250%;
Этим шагом регулируем ширину выпадающего меню в % относительно родительского

Если как-то можно корректней, проще или быстрее сделать то, что необходимо - напишите плз.
______________________________
skype: aka.alius
31 Март 2015, 17:13:01
Ответ #9
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • golden-size.ru
Можно добавить position для вложенного меню.
.sf-menu > li { position: relative;...Для ul
.sf-menu > li > ul { width: 300px; /*по самой широкой ссылки*/
Спасибо! Но допер методом проб и ошибок самостоятельно))  8)
______________________________
skype: aka.alius