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

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


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

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

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


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

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

Анимированная фиксированная кнопка сбоку

Предыдущая тема Следующая тема Перейти вниз

Анимированная фиксированная кнопка сбоку

Сообщение автор viteran в Вс 23 Сен - 13:15

Всем привет! я уже сделал кнопки основного меню фиксированными и с анимацией при наведении курсора, все по вашим инструкциям тут и тут
Спасибо за темы!
Теперь хочу сделать свою кнопку, прилепленную к левому краю, которая при наведении тож будет с анимацией со ссылкой на определенную тему. 24
вот как здесь


Последний раз редактировалось: viteran (Пн 24 Сен - 7:44), всего редактировалось 1 раз(а)
avatar
viteran
Новичок

Мужчина

Сообщения : 29
Возраст : 32
Регистрация : 2012-08-05
Благодарности : 1

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

http://spokupkami.com

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор Домовой в Вс 23 Сен - 14:07

ПА - Оформление - Шаблоны - Общие настройки
В шаблон overall_footer_end в низ перед </body>
Код:
<div style= "position:fixed;right:0px;bottom:55%;">
<a href="http://ссылка на тему"><img src="http://ссылка на картинку"/></a>
</div>
avatar
Домовой
 

Мужчина

Сообщения : 6806
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3233

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

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор viteran в Вс 23 Сен - 14:35

@Домовой пишет:ПА - Оформление - Шаблоны - Общие настройки
В шаблон overall_footer_end в низ перед </body>
Код:
<div style= "position:fixed;right:0px;bottom:55%;">
<a href="http://ссылка на тему"><img src="http://ссылка на картинку"/></a>
</div>
ну это я уже научился yes благодаря темам на которые вы мне раньше отвечали. кнопка будет статической, ну либо вставить gif, тода она будет анимационной всегда, а вот как сделать чтобы при наведении курсора она менялась? unknown
avatar
viteran
Новичок

Мужчина

Сообщения : 29
Возраст : 32
Регистрация : 2012-08-05
Благодарности : 1

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

http://spokupkami.com

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор Домовой в Вс 23 Сен - 15:58

В шаблон ставите
Код:
<div style= "position:fixed; right:0px; bottom:55%;">
<a href="ссылка"><img class="asd"/></a>
</div>
В CSS
Код:
.asd{
border:none;
width:25px; /*ширина кнопки*/
height:90px; /*высота кнопки*/
cursor:pointer;
background:transparent url("http://ссылка на обычную кнопку") no-repeat center;
}
.asd:hover{
border:none;
width:25px; /*ширина кнопки*/
height:90px; /*высота кнопки*/
cursor:pointer;
background:transparent url("http://ссылка на кнопку при наведении") no-repeat center;
}
рисуйте свои кнопки и меняйте размер кнопок в коде
Пример ЗДЕСЬ
avatar
Домовой
 

Мужчина

Сообщения : 6806
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3233

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

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор viteran в Вс 23 Сен - 16:05

спасибо 13
avatar
viteran
Новичок

Мужчина

Сообщения : 29
Возраст : 32
Регистрация : 2012-08-05
Благодарности : 1

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

http://spokupkami.com

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор Домовой в Вс 23 Сен - 16:13

в мазиле не работает
avatar
Домовой
 

Мужчина

Сообщения : 6806
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3233

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

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор Домовой в Вс 23 Сен - 16:20

Вот так надо в CSS
Код:
.asd{
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
border:none !important;
width:25px;
height:90px;
cursor:pointer;
background:transparent url("http://www.snapsnap.ru/i/1rzr.png") no-repeat center;
}
.asd:hover{
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
border:none !important;
width:25px;
height:90px;
cursor:pointer;
background:transparent url("http://www.snapsnap.ru/i/2wdw.png") no-repeat center;
}
avatar
Домовой
 

Мужчина

Сообщения : 6806
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3233

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

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор viteran в Вс 23 Сен - 21:00

ВСЕ РАБОТАЕТ! БЛАГОДАРЮ!
в опере отлично работатет, в хроме контур какойто вокруг кнопки.. ну не очень страшно smile
avatar
viteran
Новичок

Мужчина

Сообщения : 29
Возраст : 32
Регистрация : 2012-08-05
Благодарности : 1

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

http://spokupkami.com

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор Домовой в Вс 23 Сен - 21:22

@viteran пишет:ВСЕ РАБОТАЕТ! БЛАГОДАРЮ!
в опере отлично работатет, в хроме контур какойто вокруг кнопки.. ну не очень страшно smile
и в мазиле нормально а вот как в хроме и в IE исправить не знаю.
avatar
Домовой
 

Мужчина

Сообщения : 6806
Возраст : 94
Регистрация : 2010-01-30
Благодарности : 3233

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

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

Re: Анимированная фиксированная кнопка сбоку

Сообщение автор viteran в Пн 1 Окт - 8:19

благодаря темам из первого моего сообщения и методу "тыка" решил проблему.. во всех браузерах все работает нормально. вот оно, если кому интерессно smile

В шаблон overall_footer_end в низ перед </body>
Код:
<div style="position:fixed; left:0%; bottom:55%;"><a href="ссылка" ><img class="asd" src="картинка кнопки (ширина 35px)" /></a></div>

В CSS
Код:
.asd{
display:inline-block;
width:35px;
overflow:hidden;
vertical-align: top;
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
.asd{
margin-left:-5px;
}
.asd:hover{
margin-left:0px;
}
пример у меня на странице
avatar
viteran
Новичок

Мужчина

Сообщения : 29
Возраст : 32
Регистрация : 2012-08-05
Благодарности : 1

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

http://spokupkami.com

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

Предыдущая тема Следующая тема Вернуться к началу


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