Создание меню (небольшая анимация), подскажите новичку

@BVA · Регистрация: 09.10.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток, уважаемые форумчане!
Недавно начал изучать JS и сейчас при попытке создать меню столкнулся с нехваткой знаний в этой области.
Логически задача простая, но в код не могу перевести, чтобы работало как надо.
Итак, логика меню:
Есть div блок, определённого размера (к примеру возьмём 61*64 px), этот блок представляет собой кнопку, состоящую из изображения (в css прописан фон), всё это является ссылкой.
При наведении на этот блок картинка меняется на другую (реализуется через css на данном этапе, но в дальнейшем было бы интересно сделать плавную замену изображения), а внизу от этого блока через js создаётся ещё один div блок, который заливается фоном через css и постепенно увеличивается до конкретной высоты (возьмём 4px) при наведении на кнопку, соответственно при onmouseout плавно с 4х пикселей сужается до 0, а затем вовсе исчезает (ну или можно оставить с нулевой высотой). Так же при наведении на кнопку в другом div блоке должно появляться текстовое содержимое основного блока (пусть текст будет в теге <span>).
Надеюсь понятно описал задачу! В данный момент реализуется примерно так:

CSS
1
2
#me {background:url(menu.jpg) no-repeat; width:61px; height:64px; position:absolute;}
#line {background-color:#36F; width:61px; position:absolute; margin-top:57px;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var height=0;
height=parseInt(height);
var height1=0;
height1=parseInt(height1);
var onInt;
var onInt1;
var num;
function on(num) {
    if (onInt==null){onInt=setInterval(t,60); height1=4; return height1;}
    t(num)=num;
    }
 
function t() {
onInt1=null;
alert(num);
document.getElementById('me'+num).innerHTML = '<div id="line" style="height:'  +height+ 'px"></div>';
if (height<4) {height++;}
else {clearInterval(onInt);}
return onInt1;
 
}
 
function off() {
    
    if (onInt1==null){  onInt1=setInterval(t2,60); height=0;}
    }
 
function t2() {
    onInt=null;
    document.getElementById('me').innerHTML = '<div id="line" style="height:'  +height1+ 'px"></div>';
    if (height1>0) {height1--;}
    else {clearInterval(onInt1);}
    return onInt;
    return height;
        
    }

HTML5
1
<a href=""><div id="me" onmouseover="on('1')" onmouseout="off()"></div> </a>

Правда здесь я уже пытался отойти от ID, чтобы реализовать меню не для 1 кнопки, а для любого количества, в итоге испортил то, что уже работало, а мозг закипает и уже совсем потерялся в своём же коде.
Надеюсь на вашу помощь!

@Dimazzzzzz · 11.10.2013, 00:35

BVA, будь добр, нарисуй на картинке, что ты хочешь получить, хотя бы примерно. Мне нужно увидеть, как выглядит кнопка в свободном состоянии, когда ее не трогают, и во что она должна превратиться, когда на нее наведут курсор.

@BVA · 11.10.2013, 11:13 **[ТС]**

Сообщение от Dimazzzzzz

BVA, будь добр, нарисуй на картинке, что ты хочешь получить, хотя бы примерно. Мне нужно увидеть, как выглядит кнопка в свободном состоянии, когда ее не трогают, и во что она должна превратиться, когда на нее наведут курсор.

В обычном состоянии кнопка - это простое изображение:

Создание меню (небольшая анимация), подскажите новичку

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

@BVA · 11.10.2013, 11:37 **[ТС]**

Вернее даже так:
Название: 03.png
Просмотров: 70

Размер: 3.5 Кб

Т.е. сама картинка меняется при наведении, но т.к. это без проблем реализуется на css, то можно не принимать во внимание.
Хотя и неплохо было бы реализовать плавную смену одного изображения на другое (но это не обязательно).

Также необходимо, чтобы при наведении на кнопку всплывал текст в стороннем блоке (блок один, а при наведении на разные кнопки появляется разный текст):

Этот текст можно брать из содержимого кнопки, например:

HTML5
1
2
3
<a href=""><div class="button">
<span>Текст, который будет всплывать при наведении</span>
</div></a>

Новые блоги и статьи Все статьи Все блоги /
YAFU@home — распределённые вычисления для математики. На CPU Programma_Boinc 20.01.2026 YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Dimazzzzzz 589 / 96 / 6 Регистрация: 24.01.2009 Сообщений: 379
	11.10.2013, 00:35
	BVA, будь добр, нарисуй на картинке, что ты хочешь получить, хотя бы примерно. Мне нужно увидеть, как выглядит кнопка в свободном состоянии, когда ее не трогают, и во что она должна превратиться, когда на нее наведут курсор. 0