Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Как поменять вид нумерации страниц тем?автор Goodmonday Вчера в 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Март 28th 2024, 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26
» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28
Анимированное меню навигации
Страница 1 из 1
Анимированное меню навигации
Этот способ позволяет анимировать меню - при наведении мыши на изображение кнопки оно будет полностью меняться на другое.
1. Для начала необходимо создать комплект кнопок навигации. Каждая кнопка должна состоять из двух, расположенных друг над другом (и обязательно равных по высоте): нижняя - это вид кнопки в обычном состоянии, верхняя - вид при наведении на нее курсора.
Ширина кнопок может быть разной, но высота всех - строго одинаковой.
2. Установите общие кнопки (Форум, Поиск, Группы и пр.) в ПА > Оформление > Управление картинками > Продвинутый режим - Общие/навигация
Персональные кнопки (например, "Локации" или "Список туториалов") добавьте через ПА > Оформление > Главная > Верхняя часть страниц & Навигация - ваша персональная кнопка - - Картинка
3. Откройте ПА > Оформление > Главная > Верхняя часть страниц & Навигация
Выберите переключатель: Показывать в панели навигации только картинки : Да
4. Добавьте в ПА > Оформление > Цвета > Каскадная таблица стилей CSS следующий код:
Внимание: значения высоты и отступа сверху
height: 37px
и
margin-top:-37px
нужно изменить вручную, они должны быть равны высоте вашей кнопки:
После этого сохраните изменения CSS. Все.
Код одинаково подходит для всех движков.
Примечание для движка IPB
Если необходимо выставить кнопки вплотную друг к другу, добавьте код:
Примечание для движка PunBB
Если необходимо выставить кнопки вплотную друг к другу, добавьте код:
1. Для начала необходимо создать комплект кнопок навигации. Каждая кнопка должна состоять из двух, расположенных друг над другом (и обязательно равных по высоте): нижняя - это вид кнопки в обычном состоянии, верхняя - вид при наведении на нее курсора.
Ширина кнопок может быть разной, но высота всех - строго одинаковой.
2. Установите общие кнопки (Форум, Поиск, Группы и пр.) в ПА > Оформление > Управление картинками > Продвинутый режим - Общие/навигация
Персональные кнопки (например, "Локации" или "Список туториалов") добавьте через ПА > Оформление > Главная > Верхняя часть страниц & Навигация - ваша персональная кнопка - - Картинка
3. Откройте ПА > Оформление > Главная > Верхняя часть страниц & Навигация
Выберите переключатель: Показывать в панели навигации только картинки : Да
4. Добавьте в ПА > Оформление > Цвета > Каскадная таблица стилей CSS следующий код:
- Код:
.mainmenu {
display:inline-block;
height:37px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:-37px;
}
a.mainmenu img:hover{
margin-top: 0px;
}
Внимание: значения высоты и отступа сверху
height: 37px
и
margin-top:-37px
нужно изменить вручную, они должны быть равны высоте вашей кнопки:
После этого сохраните изменения CSS. Все.
Код одинаково подходит для всех движков.
Примечание для движка IPB
Если необходимо выставить кнопки вплотную друг к другу, добавьте код:
- Код:
#submenu ul li a {
padding: 0px;
margin: 0px;
background-color: none;
}
- Код:
#submenu ul li a:hover {
background-color: transparent;
}
Примечание для движка PunBB
Если необходимо выставить кнопки вплотную друг к другу, добавьте код:
- Код:
#pun-navlinks li a {
margin: 0;
}
Последний раз редактировалось: Dana Domirani (Октябрь 22nd 2011, 12:41), всего редактировалось 4 раз(а)
Re: Анимированное меню навигации
Демонстрационный вариант стиля с анимированными кнопками меню можно посмотреть тут.
Внимание: если Вы все сделали правильно, но кнопки "почему-то" не работают - проверьте, чтобы была отключена Оптимизация CSS: ПА > Оформление > Цвета > Каскадная таблица стилей CSS - Опции CSS - Оптимизировать вашу CSS: нет
Внимание: если Вы все сделали правильно, но кнопки "почему-то" не работают - проверьте, чтобы была отключена Оптимизация CSS: ПА > Оформление > Цвета > Каскадная таблица стилей CSS - Опции CSS - Оптимизировать вашу CSS: нет
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Похожие темы
» Анимированное меню навигации
» Анимированное меню навигации
» Анимированное меню навигации для "Gamatos"
» Вопрос по: "Анимированное меню навигации"
» Скрипт Анимированное меню навигации
» Анимированное меню навигации
» Анимированное меню навигации для "Gamatos"
» Вопрос по: "Анимированное меню навигации"
» Скрипт Анимированное меню навигации
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения