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

@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>

Новые блоги и статьи Все статьи Все блоги /
Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .	Контроль уникальности заводского номера - вариант №2 Maks 24.03.2026 В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .	SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++ 8Observer8 24.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip	Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	Контроль уникальности заводского номера - вариант №1 Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .

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