Простое раздвижное меню на 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 обещал отомстить двумя ссылками за постовой. Что ж не побоимся и поставим его :) Дело в том, что он проводит акцию Месть за ссылку. Обещал отомстить троекратно, ежели опубликовать анонс его акции :)
Понравилась заметка? Можно подписаться на RSS ленту комментариев к заметке или ретвитнуть её. Также можно заглянуть на страницу Обновлений блога.
Комментарии:
Never Lex а как бы мне эту менюшку скачать готовую в архиве? Если не трудно скинь на почту уж очень нужно.
У меня глюки с менюшкой при работе в лучшем браузере, не понимаю в чем может быть дело.
1.) по умолчанию - текст не скрыт.
2.) после запуска функции скрытия - скрипт перестает работать.
Спасибо за статью =)