Автор Тема: Главное горизонтальное меню  (Прочитано 1126 раз)

02 Июнь 2016, 13:00:04
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
Подскажите кто знает как сделать главное горизонтальное меню " резиновым".
Прочитал все темы здесь на форуме, в одном месте нашел, что нужно изменить класс, но конкретнее ничего не нашел.
Изменяя отступы и шрифт можно подстроить меню только под определенное разрешение экрана.
Помогите если это вообще возможно без дополнительного модуля.
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 13:13:51
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 1807
  • Репутация: +49/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Совсем "резиновым" неполучится. Ограничение на добавление ссылок будет. Нельзя в меню 20-30 ссылкок добавить и чтобы были они в один ряд.
Можно изменять ширину ссылок, подстраивать под количество добавленных ссылок. В файле /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css изменяете параметр padding.
.sf-menu > li > a { padding: 17px 20px;Также можно добавить ширину для
.sf-menu > li { width: 100 / на количество ссылок %;
02 Июнь 2016, 14:46:19
Ответ #2
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
Совсем "резиновым" неполучится. Ограничение на добавление ссылок будет. Нельзя в меню 20-30 ссылкок добавить и чтобы были они в один ряд.
Можно изменять ширину ссылок, подстраивать под количество добавленных ссылок. В файле /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css изменяете параметр padding.
.sf-menu > li > a { padding: 17px 20px;Также можно добавить ширину для
.sf-menu > li { width: 100 / на количество ссылок %;
Первый вариант проверял, работает отлично, но для одного разрешения.
Напрмер - 8 пунктов  padding: 17px 24.5px; разрешение экрана 1024, при переходе на разрешение 1280  можно еще 3 пункта добавить.
А вот вариант с % интересен - проверю.
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 14:51:27
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 16667
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
1 вариант нужно совмещать  с CSS Media Queries
@media screen and (max-width: 980px) {...тогда можно под все разрешения создать правила.
02 Июнь 2016, 14:57:21
Ответ #4
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
1 вариант нужно совмещать  с CSS Media Queries
@media screen and (max-width: 980px) {...тогда можно под все разрешения создать правила.
Я что то такой цифры 980px не встречал в файле CSS.
Я правильно понял надо 980 заменить на скажем 1280 и настроить количество, шрифт и отступы по горизонтали и все будет работать ?
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 15:21:36
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 16667
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Для этого задают разные размеры для разных разрешений.
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
основные разрешения экранов, для каждого создаете свои правила.
02 Июнь 2016, 16:17:10
Ответ #6
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
Спасибо всем за ответы !
Буду пробовать на субдомене, если вдруг что то получится отпишусь.
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 18:19:03
Ответ #7
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
Что то похожее получилось, но совсем другим способом.
Желающие протестируйте на разных браузерах и расширениях, у меня кажется работает.
Нужно еще проверить на большем количестве ссылок - если действительно работант результат выложу здесь. Субдомен сайта http://news.onlyshkira.com/ru/
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 18:30:07
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 3419
  • Репутация: +79/-6
  • Сообщество PrestaShop
    • Просмотр профиля
calc() в Safari не поддерживается, ты сам проверял?
02 Июнь 2016, 18:37:04
Ответ #9
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
calc() в Safari не поддерживается, ты сам проверял?
Вот в Сафари не проверял, проверю.
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 18:42:17
Ответ #10
  • Старожил
  • ****
  • Сообщений: 310
  • Репутация: +7/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Адвокаты, юристы. Киев, Чернигов
В сафари тоже работает.
Установка, настройка, сайтов, интернет-магазинов, наполнение интернет - магазинов на движке WP, PrestaShop.
Юридические услуги http://kanon-lawyers.com.ua на WP Интернет - магазин https://balagan.pp.ua на PrestaShop
02 Июнь 2016, 18:48:35
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 3419
  • Репутация: +79/-6
  • Сообщество PrestaShop
    • Просмотр профиля
Ну тогда только клиенты со старыми браузеры пролетают. А их не так много. Пусть обновляются  :)