Адаптируемый стиль и меню

[Anvar]

Адаптируемый стиль для prosilver, позволяет адаптироваться под планшеты, мобильные телефоны и другие девайсы с небольшим дисплеем.

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

Первый вариант - просто кидаем файл responsive.css в папку со стилями themes/ и подключаем его в stylesheet.css, очищаем кэш и заходим с любого девайса. [Отлично ведёт себя с phpBB Gallery, Buttons Menu]

Responsive_Prosilver_Lite-1.0.0.zip

Второй вариант - аналогичен, но дополнительно имеем плавающее меню навигации вместо стандартного navbar, которое также адаптируется под любой дисплей, превращаясь при этом в гармошку. Нажимая на иконки справа можно раскрыть блоки с ссылками. При получении нового ЛС, меняется иконка "Домик" на конвертик с ссылкой в ЛС.

Responsive_prosilver_and_menu_accordion-1.0.0.zip

Установка всего в два клика! Полезный минимализм!..

screen.jpg

[Di_Mok]

Демку бы показал.

[Anvar]

Демо, штатный просильвер: http://vzaimoposting.ru/?style=1 и на изменённом стиле http://stepnyak.kz/

Если на компьютере, то можно испытать свернув окно браузера в пол экрана к примеру. Тестировалось на нескольких браузерах, Опера, Хром, IE и Опера Мини на мобильном телефоне.
Задействованы штатные стили и иконки prosilver.

[x00peR]

Anvar, немного критики
1.Иконки имеют проблески белой окантовки;
2.Слишком большая высота;
3.Для меня непонятно почему иконки исчезаю при наведении, на мой взгляд должно быть что то другое.
4.При сворачивании окна браузера - меню выстраивается вертикально, при этом справа появляются какие то 3 полоски напротив каждого пункта меню.

[Anvar]

1. Иконки штатные в стиле prosilver, эта критика не сюда (хотя можно изменить в коде forabg на navbar и эти дефекты скроются).
2. Высота легко меняется в responsive.css
padding: 10px 20px;

Код: Выделить всё

[class*="avatar-main-menu"] > li {
	float: left;
	font-size: 14px;
	padding: 10px 20px;

+
line-height: 30px;

Код: Выделить всё

[class*="avatar-main-menu"] li a {
	color: #fff;
	display: block;
	line-height: 30px;

3. Иконки в принципе можно убрать совсем. На стиле Joomla откуда я и вырезал меню, их не было.
4. Последний пункт, гармошка, тоже убирается в два счёта, из шаблона удаляем все <span class="pull"></span>. В перспективе, при нажатии на неё, меню должно раскрываться.
На вкус и цвет, последний легко меняется..

Спасибо за критику )))

[x00peR]

В перспективе, при нажатии на неё, меню должно раскрываться

Да, вот это было бы здорово

[Anvar]

Теперь меню на небольших экранах работает гармошкой. Как и планировалось, кликнув на белые три полоски справа. Архив обновил))

[boroda-max]

Прекрасно выполненная Работа! Спасибо огромное!

[angst66]

Пару вопросов. Не пойму, noConflict это для чего? Для тех у кого стоит mootools, или у кого стоит jQuery? Обязательно их вместе женить? Второй вопрос. Как данный мод адаптировать под такое меню? http://phpbb3hacks.com//modifications.p ... ttons-menu

[Anvar]

Тут используется mootools и jquery, для раскрытия меню сжатых в гармошку на небольших дисплеях. Можно было обойтись без mootools, есть способ проще, но так было предусмотрено в стиле из которого вырезана эта часть.

[sasa85]

Никто не допиливал этот мод до победного конца?

[ra02ra02]

Anvar, пожалуйста подробнее опишите подключение