jQuery: Помогите создать простенькое меню

программирование JavaScript jQuery

Пожалуйста, помогите создать простенькое меню. Это меню для выбора языка. Там три флага. Поначалу отображаются обычные изображения флагов 30x20px, которые заложены в div'ы, которые потом же обрамлены чёрной рамкой размером 2px. Надо сделать так, чтобы при наведении на один из div'ов эффектно появлялась надпись в нём. То есть: вот я подвёл указатель мыши к флагу, div плавно расширяется вправо, и виднеется надпись-подсказка, при отведении указателя мыши эффект тот же, но в обратную сторону (влево). Чтобы вам было легче понять всю задумку, посмотрите на картинку-демонстрацию: http://i52.fastpic.ru/big/2013/0325/14/d03c048589f546a0724c8d2c1c9e9014.png

Зелёная рамка, по задумке, обозначает текущий язык. Неважно, с этим я уже разобрался, осталось сделать эффект выдвигания. Предоставлю готовый код статического меню:

<div style="position: absolute; left: 0px; top: 0px;">
<div style="cursor: pointer; border: 2px solid #000000; background: #000000;" onclick="language_set('en')"><img src="/images/en.png"> English</div>
<div style="cursor: pointer; border: 2px solid #000000; background: #000000;" onclick="language_set('ru')"><img src="/images/ru.png"> Русский</div>
<div style="cursor: pointer; border: 2px solid #000000; background: #000000;" onclick="language_set('uk')"><img src="/images/uk.png"> Український</div>
</div>

Примечание:
slo_nik, вот что насчёт методов - я давно понял. А вот насчёт горизонтального выдвигания - без понятия.

Примечание:
slo_nik, мне стоило подчеркнуть слово "ГОРИЗОНТАЛЬНОГО", т. к. в дефолте jQuery нет анимации, которая позволяет расширять по-горизонтали.

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

Примечание:
А нет, не надо. Я через исходный код посмотрел.

Примечание:
slo_nik, подождите, то есть просто надо в параметрах .animate задать параметры CSS, и всё будет выполняться?

Примечание:
slo_nik, меня одно настораживает сейчас: те надписи, что заключены в div'ах, переносятся, и тем более не прячутся. Даже пробовать не хочется.

Примечание:
0$ без НДС.

Примечание:
Всё, я разобрался. Спасибо, slo_nik!
Ответы:
метод hover() Вам в помощь


11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.