Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Анимированное меню навигации Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Анимированное меню навигации Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях
Важная информация!

Правила форума

для обязательного прочтения!

Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» как настроить автоматическое закрепление первого сообщения в теме?
автор Форум Г. Сегодня в 19:08

» совет админам
автор Форум Г. Вчера в 12:24

» Не могу поменять местами виджеты форума.
автор Форум Г. Вчера в 12:19

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор https://https-festasport. Декабрь 7th 2024, 19:06

» Пропала функция редактировать сообщение
автор VENEFICA. Декабрь 6th 2024, 07:12

» Не корректное отображение картинок
автор Luz Декабрь 5th 2024, 19:19

» ВПН
автор Luz Декабрь 5th 2024, 19:17

» Дублируется ссылка на форум в боковом меню
автор Luz Декабрь 5th 2024, 19:14

» Как найти администратора?
автор Luz Ноябрь 28th 2024, 14:12

» Пропала вкладка "Обработка пользователей"
автор Luz Ноябрь 28th 2024, 13:56

Анимированное меню навигации

Перейти вниз

Анимированное меню навигации Empty Анимированное меню навигации

Сообщение автор Dana Domirani Май 6th 2010, 14:54

Этот способ позволяет анимировать меню - при наведении мыши на изображение кнопки оно будет полностью меняться на другое.
Анимированное меню навигации 0bef204b7a83t
Анимированное меню навигации 41e4a9316205t

1. Для начала необходимо создать комплект кнопок навигации. Каждая кнопка должна состоять из двух, расположенных друг над другом (и обязательно равных по высоте): нижняя - это вид кнопки в обычном состоянии, верхняя - вид при наведении на нее курсора.

Анимированное меню навигации 00610Анимированное меню навигации 00710Анимированное меню навигации 01810Анимированное меню навигации 01610Анимированное меню навигации 01410Анимированное меню навигации 00810Анимированное меню навигации 01710

Анимированное меню навигации 01110Анимированное меню навигации 00910Анимированное меню навигации 01010Анимированное меню навигации 1964777Анимированное меню навигации 01314Анимированное меню навигации 00410Анимированное меню навигации 00510
Ширина кнопок может быть разной, но высота всех - строго одинаковой.

2. Установите общие кнопки (Форум, Поиск, Группы и пр.) в ПА > Оформление > Управление картинками > Продвинутый режим - Общие/навигация
Персональные кнопки (например, "Локации" или "Список туториалов") добавьте через ПА > Оформление > Главная > Верхняя часть страниц & Навигация - ваша персональная кнопка - modif - Картинка

3. Откройте ПА > Оформление > Главная > Верхняя часть страниц & Навигация
Выберите переключатель: Показывать в панели навигации только картинки : Да
Анимированное меню навигации 03da5db85305t

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;
}
Примечание Значение inline-block поддерживается во всех современных браузерах - Internet Explorer 8, Chrome 3 и 4, Opera 9 и 10, Firefox 3, Safari 3 и 4. В старых браузерах меню будет отображаться корректно, но без анимации.
Внимание: значения высоты и отступа сверху
height: 37px
и
margin-top:-37px
нужно изменить вручную, они должны быть равны высоте вашей кнопки:
Анимированное меню навигации 47a62d6b8510

После этого сохраните изменения CSS. Все.
Код одинаково подходит для всех движков.




Примечание для движка IPB
Если необходимо выставить кнопки вплотную друг к другу, добавьте код:
Код:
#submenu ul li a {
 padding: 0px;
 margin: 0px;
 background-color: none;
 }
Если кнопка с прозрачным фоном (например, в формате gif или png), то для устранения подсветки фона под ней добавьте следующий код:
Код:
#submenu ul li a:hover {
 background-color: transparent;
 }



Примечание для движка PunBB
Если необходимо выставить кнопки вплотную друг к другу, добавьте код:
Код:
#pun-navlinks li a {
 margin: 0;
 }


Последний раз редактировалось: Dana Domirani (Октябрь 22nd 2011, 12:41), всего редактировалось 4 раз(а)
Dana Domirani
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22996
Возраст : 40
Регистрация : 2008-04-18
Благодарности : 9286

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Анимированное меню навигации Empty Re: Анимированное меню навигации

Сообщение автор Dana Domirani Июнь 10th 2010, 18:56

Демонстрационный вариант стиля с анимированными кнопками меню можно посмотреть тут.

Внимание: если Вы все сделали правильно, но кнопки "почему-то" не работают - проверьте, чтобы была отключена Оптимизация CSS: ПА > Оформление > Цвета > Каскадная таблица стилей CSS - Опции CSS - Оптимизировать вашу CSS: нет


Анимированное меню навигации Userba12

Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


Dana Domirani
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22996
Возраст : 40
Регистрация : 2008-04-18
Благодарности : 9286

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения