Простое раздвижное меню на javascript

Сегодня мы продолжим рассматривать простейшие решения на javascript. Я уже рассказывал о меню на основе вкладок и об организации прайс-листа. В обоих случаях были использованы максимально простые решения. Никаких популярных библиотек jquery и prototype (не то, чтобы я был категорически против фреймворков, но для решения одной простой задачи незачем цеплять лишние файлы).

В этот раз не получится сделать скрипт НАСТОЛЬКО простым, как это получилось в прошлых статьях. Однако, я cчитаю, что один килобайт скрипта против ста килобайт фреймворка – это вовсе неплохой результат.

Итак. В этот раз решил не рассказывать, как я дошёл до этого скрипта (разве это кому-нибудь интересно? :). Просто опишу его. Наш скриптик будет состоять из трёх функций. Первая для плавного показа скрытого элемента, вторая – для скрытия, и последняя функция будет отвечать за то, какое действие должно отрабатываться в данный момент.

Код Javascript

// Эта функция умеет плавно показать блок.
function show(id, height) { // Объявляем функцию. Заданными параметрами будут айдишник элемента и его высота.
var a = document.getElementById('p'+id); // Определяем переменные. Скрытый элемент.
var b = document.getElementById('m'+id); // Определяем переменные. Ссылка, связанная со скрытым элементом.
document.getElementById('p'+id).style.display=''; // Теперь наш блок не скрыт злобным свойством display:none (тотальное скрытие элемента). Насколько я помню, его пришлось назначать скрытому элементу для «лучших» браузеров.
b.className='sel'; // Присваиваем ссылке класс выделения.
if (a.offsetHeight < height) { // Пока высота меньше заданой вами высоты
a.style.height = (a.offsetHeight + 10) + "px"; // прибавляем по 10 пикселов к текущей высоте.
setTimeout (function(){show(id, height)}, 30); // Запускаем скрипт заново через 30 миллисекунд.
}
else {bl=0;document.getElementById('p'+id).style.overflow='visible'}; // Или ставим маркер bl равный нулю, а элементу присваиваем свойство overflow:visible (то есть, элемент теперь будет отображён полностью, даже если не влазит в свои рамки).
}

// Эта функция умеет плавно спрятать блок с глаз долой. Здесь всё аналогично, только наоборот.
function hide(id) {
var a = document.getElementById('p'+id);
var b = document.getElementById('m'+id);
document.getElementById('p'+id).style.overflow='hidden';
if (a.offsetHeight > 1) {
a.style.height = (a.offsetHeight - 10) + 'px';
setTimeout (function(){hide(id)}, 30);
}
else {bl=0;b.className='';document.getElementById('p'+id).style.display='none';
}
}

var bl=0; // Ставим маркер bl равный нулю по умолчанию.
// А эта функция управляет предыдущими двумя
function showhide(id, height) {
var a = document.getElementById('p'+id);
if(bl==1){return false;} // Если bl равен нулю, значит ничего не делаем.
bl=1; // Иначе присваиваем маркеру bl значение 1, чтобы до конца обработки рабочих функций дёрганье управляющей функции не имело никакого эффекта. Иначе могут вылазить глюки (если быстро кликать).
if(a.offsetHeight < height) // Если высота элемента меньше заданной высоты
{show(id, height)} // значит запускаем функцию показа,
else // иначе
{hide(id)} // запускаем функцию скрытия.
}

Ну, и конечно живой пример менюхи.

Логика проста. При запуске функции мы задаём id элемента и высоту. В зависимости от того, какое значение высоты элемента в данный момент, начинаем показывать или скрывать элемент. Плавность достигается банально за счёт увеличения высоты через определённый промежуток времени. Скорость отображения/скрытия можно регулировать. Вы наверно заметили пляски с бубном вокруг параметра bl – так делать пришлось из-за глюков, появляющихся в случае быстрого кликанья по ссылке. Также для «лучших» браузеров (догадались для каких? :) понадобилось скрывать элементы с помощью display:none.

Конечно скрипт писался для конкретной менюшки, поэтому подразумеваются определённые идентификаторы. Их можно поменять на свои, немного разобравшись в коде скрипта. Удачи.

Вроде всё просто. Надеюсь, что мои комментарии понятны. Если нет – прошу в комменты. Также уверен, что подобный скрипт можно написать и проще и более понятно, однако данное решение мне нравится. Буду рад, если вы пришлёте свои варианты реализации.

Продолжаю обмен постовыми.

Для начинающих веб-мастеров будут полезны бесплатные видеоуроки по div верстке сайта из psd-макета.

А также Cobber обещал отомстить двумя ссылками за постовой. Что ж не побоимся и поставим его :) Дело в том, что он проводит акцию Месть за ссылку. Обещал отомстить троекратно, ежели опубликовать анонс его акции :)

Подписаться на обновления:

Поделиться ссылкой:


Комментарии:

23.01.2010 22:55:58
#1 Игорь

Спасибо за статью =)

03.02.2010 16:48:51
#2 Иван

спасибо. успехов

03.02.2010 17:43:32

Игорь, Иван, пожалуйста. Заходите ещё.

11.02.2010 18:29:24
#4 Артём

Never Lex а как бы мне эту менюшку скачать готовую в архиве? Если не трудно скинь на почту уж очень нужно.

11.02.2010 23:00:13

Артём, можно просто перейти на страничку с примером и сохранить её. И никакие архивы не нужны :)

15.02.2010 09:54:42
#6 Андрей

У меня глюки с менюшкой при работе в лучшем браузере, не понимаю в чем может быть дело.
1.) по умолчанию - текст не скрыт.
2.) после запуска функции скрытия - скрипт перестает работать.

15.02.2010 10:28:09

Андрей, очень странно. Скорее всего у вас проблемы с браузером. Напишите мне в icq или почту.

15.02.2010 10:38:17
#8 Андрей

Ваш пример работает во всех браузер, наверное я что-то неправильно копирую или вставляю. Сейчас скину вам урл сайта на почту.

28.03.2010 19:47:34
#9 Михаил

а вы не подскажете как сделать что бы при переходе по ссылке отдел оставался открытым???

28.03.2010 23:01:43

Михаил, это уже на PHP нужно прописывать.

08.04.2010 17:29:31
#11 trikadin

Хм. Так и не понял «пляски с бубном вокруг параметра bl». Поясните, ладно? Очень нужно, но не понимаю, как работает.

08.04.2010 21:59:21
#12 trikadin

Всё. Догнал. Спасибо)

12.04.2010 10:32:45
#13 Олег

Круто! спасибо за менюшку))

18.04.2010 16:15:36
#14 antoxa-ua

а прикольно сделанно

29.04.2010 18:26:47
#15 K-89

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

29.04.2010 18:28:09

K-89, киньте в почту кодом :)

29.04.2010 18:40:59
#17 K-89

Вот посмотрите: http://asta-travel.com/hotels-in-russia.html
Меню справо. В IE нормально, но в Mozile всё ужасно. Попробуйте раскрыть всё полностью. И увидите. Спасибо.

29.04.2010 18:42:10
#18 K-89

Описался СЛЕВО меню )

29.04.2010 18:46:37

K-89, мда. Чудеса с CSS :) Подберите нужную высоту, чтобы не ездило по всему экрану :) Зачем, например, Питер и Москва раскрываются аж на 400 пикселей?

29.04.2010 18:47:46
#20 K-89

Щас изменю, результата от этого не будет(

29.04.2010 18:49:58

K-89, сделайте подменю высотой в 200 пикселей, например, а подподменюшки высотой в 40 пикселей. Выезжать и не будет.

29.04.2010 18:52:56
#22 K-89

у меня будет список гостиниц большим, 5звёзд = например надо 100пикселей, 4з.=150пикселей, И надо чтобы при открытии всего меню оно не наезжало например Питерские гостиницы на Московские... Спастбо.

10.05.2010 18:56:23
#23 wacker

спасибо!

18.06.2010 00:19:39
#24 goo

А это меню индексируется? И какие ссылки ставить! Спасибо

18.06.2010 00:43:07

goo, конечно индексируется. А что с ссылками то?

18.06.2010 14:27:37
#26 goo

Спасибо! А ссылками просто затупил!

06.07.2010 15:26:30
#27 Виха

А если помучаться и доработать так, чтобы при открытии следующего пункта меню, предыдущий закрывался? Что то мне подсказывает, что для Вас это работы на несколько минут, а нам, простым смертным, было бы удобно и приятно. Заранее спасибо.

06.07.2010 15:46:12

Виха, а вы просто повесьте 2 события на клик или доработайте функцию. Чтобы клик одновременно закрывал все подменюшки и открывал нужную.

07.07.2010 15:05:46
#29 max.gavrilov

Как на счет кроосбраузерности? У меня в опере не отображает!

09.07.2010 21:59:38
#30 Виха

Never Lex, Спасибо за саму идею менюхи, доработал как мог, в силу своих скудных познаний :-) но реализовать свою идею не смог. Хотя бы намекните как устроить проверку на открытые подменю, чтобы на них запустить функцию hide.
max.gavrilov, А я как раз в ОПЕРЕ и тестирую - все прекрасно работает. Версия ОПЕРЫ - 9.64

09.07.2010 22:08:29
#31 Виха

max.gavrilov, А вот в 7 ИЕ получился глюк - при открытии странички с таким меню, меню получилось полностью развернуто. При попытке нажать на заголовок меню получается бесконечный цикл - закрывается и открывается меню, при этом повторное нажатие на заголовок не приводит ни к какому результату.
Never Lex,
И при повторном прочтении совета по поводу моей просьбы - обратил внимание на небольшое уточнение - сначала закрыть ВСЕ подменю, а затем открыть нужное. Попробую сделать, отпишусь по результатам.

09.07.2010 23:18:13
#32 Виха

Never Lex.
Спасибо, немного пораскинув мозгами :-), пришел к выводу, что в событии onclick в начале просто нужно добавить функцию hide(id), где id - номер закрываемого подменю. Благо у меня пока что только два подменю. Но при увеличении количества подменю, просто добавляются еще функции hide(id) в каждое подменю. Можно помучаться и сделать универсальную функцию, которая будет закрывать все подменю и не надо будет мучаться с добавление в каждое событие onclick, но ночь на улице и глазки слипаются, да и необходимости бешенной нет. Пока мои потребности удовлетворены.
Еще раз спасибо за скрипт.

10.07.2010 10:44:21

Виха, пожалуйста. Всегда приятней самому что-то разработать, а не взять готовый код. Правда? :)

11.07.2010 12:53:34
#34 Виха

Never Lex,
Это с какой стороны посмотреть :-) Если что то соображаешь, то конечно приятно самому разработать или доработать и получить результат, а если просто хочется красивую фишку получить, а знаний никаких? Вот тут на помощь приходят такие специалисты как Вы. У меня просто опыта работы с java+html практически нет. Литературы нормальной найти не могу. Вот и приходится использовать чьи то наработки+метод научного тыка.

12.07.2010 10:03:33

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

01.08.2010 20:51:01
#36 Жека

Установил этот js в своё меню, у моей ссылке по которой кликаю есть стиль прописанный через класс, когда я на неё нажимаю этот стиль слетает, подскажите что нужно прописать в js что-бы стиль не слетал?

03.08.2010 11:47:56

Жека, по идее стиль слетать не должен. Напишите лучше на почту с указанием кода. Будет проще разобраться.

14.08.2010 19:04:54
#38 demiurge

Наконец-то я нашёл это!!!
Ну просто наигромнейшое спасибо:)

31.08.2010 21:36:45

Помню давно искал такую классную менюху, но отчаялся и плюнул на это дело. Вот сейчас подумываю о смене меню.Пример сохранил-спасибо вам!

Оставьте комментарий [форматирование]

Пожалуйста, воздержитесь от спама и идиотских высказываний. Коменты жёстко модерируются. Ссылки на всё кроме личных блогов и тематических блогов, сходных по тематике с данным, вырезаются.



Мой RSS фид