Главное горизонтальное меню

[Arhistratig]

Подскажите кто знает как сделать главное горизонтальное меню " резиновым".
Прочитал все темы здесь на форуме, в одном месте нашел, что нужно изменить класс, но конкретнее ничего не нашел.
Изменяя отступы и шрифт можно подстроить меню только под определенное разрешение экрана.
Помогите если это вообще возможно без дополнительного модуля.

[Mr.Sen]

Совсем "резиновым" неполучится. Ограничение на добавление ссылок будет. Нельзя в меню 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 / на количество ссылок %;

[Arhistratig]

Совсем "резиновым" неполучится. Ограничение на добавление ссылок будет. Нельзя в меню 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 пункта добавить.
А вот вариант с % интересен - проверю.

[Adik]

1 вариант нужно совмещать  с CSS Media Queries

Код Выделить Развернуть

@media screen and (max-width: 980px) {...
тогда можно под все разрешения создать правила.

[Arhistratig]

1 вариант нужно совмещать  с CSS Media Queries

Код Выделить Развернуть

@media screen and (max-width: 980px) {...
тогда можно под все разрешения создать правила.

Я что то такой цифры 980px не встречал в файле CSS.
Я правильно понял надо 980 заменить на скажем 1280 и настроить количество, шрифт и отступы по горизонтали и все будет работать ?

[Adik]

Для этого задают разные размеры для разных разрешений.

Код Выделить Развернуть

/* 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) {
}

основные разрешения экранов, для каждого создаете свои правила.

[Arhistratig]

Спасибо всем за ответы !
Буду пробовать на субдомене, если вдруг что то получится отпишусь.

[Arhistratig]

Что то похожее получилось, но совсем другим способом.
Желающие протестируйте на разных браузерах и расширениях, у меня кажется работает.
Нужно еще проверить на большем количестве ссылок - если действительно работант результат выложу здесь. Субдомен сайта http://news.onlyshkira.com/ru/

[Миколас]

calc() в Safari не поддерживается, ты сам проверял?

[Arhistratig]

calc() в Safari не поддерживается, ты сам проверял?

Вот в Сафари не проверял, проверю.

[Arhistratig]

В сафари тоже работает.

[Миколас]

Ну тогда только клиенты со старыми браузеры пролетают. А их не так много. Пусть обновляются