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

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


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

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

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


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

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

» AdSense
автор Magliga Вчера в 17:28

» Мои личные настройки
автор Jelena Вчера в 16:10

» Перестала работать регистрация на форум.
автор Jelena Вчера в 15:59

» [Общая тема] Заявки на удаление сомнительной рекламы
автор АГРАФЕНА Вчера в 14:02

» Единственный выбор
автор Cari Вчера в 13:49

» Исчезли картинки
автор Armanda Вс 17 Июн - 20:22

» Перенос форума
автор RedCat Вс 17 Июн - 18:46

» Не работают подписи
автор Dana Domirani Вс 17 Июн - 17:59

» Самоудаление вложенного файла
автор Dana Domirani Вс 17 Июн - 17:59

Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Перейти вниз

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

Сообщение автор Dana Domirani в Чт 6 Май - 14:54

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



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




Ширина кнопок может быть разной, но высота всех - строго одинаковой.

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

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


После этого сохраните изменения 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 (Сб 22 Окт - 12:41), всего редактировалось 4 раз(а)
avatar
Dana Domirani
Администратор
Администратор

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор Dana Domirani в Чт 10 Июн - 18:56

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

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



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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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


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