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

02 Июня 2016, 13:00:04
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Инструменты для дома
Подскажите кто знает как сделать главное горизонтальное меню " резиновым".
Прочитал все темы здесь на форуме, в одном месте нашел, что нужно изменить класс, но конкретнее ничего не нашел.
Изменяя отступы и шрифт можно подстроить меню только под определенное разрешение экрана.
Помогите если это вообще возможно без дополнительного модуля.
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 13:13:51
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 1195
  • Репутация: +28/-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
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-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 пункта добавить.
А вот вариант с % интересен - проверю.
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 14:51:27
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 13139
  • Репутация: +14553/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1 вариант нужно совмещать  с CSS Media Queries
@media screen and (max-width: 980px) {...тогда можно под все разрешения создать правила.
02 Июня 2016, 14:57:21
Ответ #4
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Инструменты для дома
1 вариант нужно совмещать  с CSS Media Queries
@media screen and (max-width: 980px) {...тогда можно под все разрешения создать правила.
Я что то такой цифры 980px не встречал в файле CSS.
Я правильно понял надо 980 заменить на скажем 1280 и настроить количество, шрифт и отступы по горизонтали и все будет работать ?
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 15:21:36
Ответ #5
  • Ветеран
  • *****
  • Сообщений: 13139
  • Репутация: +14553/-0
  • Сообщество 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
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Инструменты для дома
Спасибо всем за ответы !
Буду пробовать на субдомене, если вдруг что то получится отпишусь.
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 18:19:03
Ответ #7
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Инструменты для дома
Что то похожее получилось, но совсем другим способом.
Желающие протестируйте на разных браузерах и расширениях, у меня кажется работает.
Нужно еще проверить на большем количестве ссылок - если действительно работант результат выложу здесь. Субдомен сайта http://news.onlyshkira.com/ru/
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 18:30:07
Ответ #8
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
calc() в Safari не поддерживается, ты сам проверял?
02 Июня 2016, 18:37:04
Ответ #9
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Инструменты для дома
calc() в Safari не поддерживается, ты сам проверял?
Вот в Сафари не проверял, проверю.
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 18:42:17
Ответ #10
  • Фрилансер
  • *
  • Сообщений: 196
  • Репутация: +5/-0
  • Сообщество PrestaShop
    • Просмотр профиля
    • Инструменты для дома
В сафари тоже работает.
Установка, настройка, наполнение интернет - магазинов на движке PrestaShop.
Оцените этот сайт http://dniprotools.com.ua на PrestaShop 1.6.1.8
02 Июня 2016, 18:48:35
Ответ #11
  • Ветеран
  • *****
  • Сообщений: 2167
  • Репутация: +49/-4
  • Сообщество PrestaShop
    • Просмотр профиля
Ну тогда только клиенты со старыми браузеры пролетают. А их не так много. Пусть обновляются  :)