Перейти к публикации

Меняющаяся кнопка


Рекомендованные сообщения

Подскажите плиз код, для реализации меню:

Меню-блок, состоит как бы из кнопок.

кнопка: наводим курсор - меняеться, уводим - принимает первоначальный вид.

т.е. используеться 2 картинки. Но нужно что бы текст был не нарисован на самой картинке, а написан на ней.

Соре если криво обьяснил.. :unsure:

Ссылка на сообщение
Поделиться на других сайтах

Нет, ненарисованы...

ну вот например наподобие такого хочеться:

testwi3.gif

в выделеном состоянии пункт "статистика"

Хочеться узнать как такое реализовываеться..

Изменено пользователем Demon2
Ссылка на сообщение
Поделиться на других сайтах

Если псевдокнопка, т.е. линк на фоне - в стилях пишешь a:hover и там другой цвет, фон и т.п.

Ссылка на сообщение
Поделиться на других сайтах

Да, думаю это то что мне нужно, только вот с css я не дружу..

Пытаюсь добавить такое:

.menu { color: #000000; font-family: tahoma; font-size: 11px; background: url(../images/menu_bg.gif); cursor: pointer; padding-left: 15px; }

.menu a:hover { color: #000000; font-family: tahoma; font-size: 11px; background: url(../images/menu_bg_actived.gif); cursor: pointer; padding-left: 20px; }

Но вообще не то че-то..

Изменено пользователем Demon2
Ссылка на сообщение
Поделиться на других сайтах

Вот это - "url(../images/menu_bg_actived.gif);" - явно работать будет не всегда.

Ссылка на сообщение
Поделиться на других сайтах

Ну насчет ссылки ясно...ладно, попробую пока что помучаться сам, но примерчик непомешал бы..

Изменено пользователем Demon2
Ссылка на сообщение
Поделиться на других сайтах

Пример

HTML код

<div class="yoMenu">
<ul>
<li><a href="http://yoSite.ru" title="yoTitle">yoMenu 1</a></li>
<li><a href="http://yoSite.ru" title="yoTitle">yoMenu 2</a></li>
<li><a href="http://yoSite.ru" title="yoTitle">yoMenu 3</a></li>
</ul>
</div>[/html]

CSS

[code].yoMenu ul { list-style: none; margin: 0px 0px 5px 0px; padding: 0px; } .yoMenu ul li { display: inline; padding: 0px; margin: 0px; } .yoMenu ul li a, .yoMenu ul li a:visited { display: block; color: #5e66b1; text-decoration: none; margin: 0px; padding: 4px 10px 4px 10px; border-bottom:1px solid #f5f5f5; font-size: 10pt; background: #000 url(http://yoSite.ru/img/menuoff.gif) center center repeat-x; } .yoMenu ul li a:hover { background: #fff url(http://yoSite.ru/img/menuon.gif) center center repeat-x; color: #000; text-decoration:none; }[/code]

menuoff.gif и menuon.gif картинки высотой как пункт меню (можно больше) и шириной 2-5 пикселей.

Ссылка на сообщение
Поделиться на других сайтах

Спасибо, применил еще немного фантазии и неплохо получилось :)

Изменено пользователем Demon2
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...