Динамичное меню с помощью jQuery
23 февраля 2010 года, Размещено в категории: jQuery / MooTools
Сегодня будем рассматривать хорошее динамическое вертикальное меню, которое работает с помощью JavaScript, а точнее на библиотеки jQuery.
Мне лично очень понравились эффекты меню, и Вы сами можете оценить посмотрев демо, и скачать исходники меню...
Шаг 1: HTML код
Делаем каркас нашего меню из списка <ul> </ ul>
Между тегами <head></head> подключаем CSS файл, плагин jQuery и файл с фрейморком jQuery. Посмотрите код:
Шаг 2: Объяснение эффекта jQuery
Сам эффект запускается с файла sliding_effect.js при помощи функции:
slide(navigation_id, pad_out, pad_in, time, multiplier)
navigation_id — название блока, в котором данный эффект будет использоваться
pad_out — основной отступ меню в состоянии с покоя
pad_in — отступ при наведении на меню
time — время «выпрыгивания» меню при загрузке страницы
multiplier — количество шагов при выпрыгивании елементов меню
Кстати автором данного меню является
Мой блог находят по следующим фразам
• флеш плееры для сайта
• плавное перемещение к якорю jquery
• как сделать фон на сером картоне
• http://dicim.net/kak-sdelat-ikonku-dlya-sajta-ili-kak-sdelat-favicon.html
• вывод иконок из архива zip в html через css
• фоновый рисунок сайта загружался быстро
12 лет назад
Отличный подарок к 23 февраля! 🙂
Только вот ссылку надо бы поправить. Там архив с журналом, а не исходники.
Артём
12 лет назад
blogonewsnewdiz5 это точно то? я не нашёл в архиве css файла и ява скрипта…
12 лет назад
Все ссылку поправил, извиняюсь за ошибочку. Кстати всех с праздником 🙂
Артём
12 лет назад
У меня возникла проблема: после установки меню большая часть текста на странице поменяла цвет на жёлтый, а некоторый текст увеличился раза в 2-3, и исчёзла стрелочка из слайд шоу http://dicim.net/?p=757 ,а также теперь по умолчанию стоит последний слайд, и с него нельзя переключитсья не на один другой, подскажите пожалуйста как решить.
Артём
12 лет назад
При редактировании CSS стиля этого меню, вся информация на странице тоже изменяеться, как ограничить влияние этого стиля, чтобы дальше меню стиль не распространялся?
eXtra
10 лет назад
Может поможет кому.
Чтобы на странице не менялась вся инфа от стиля меню, в файле скрипта замените
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
на
// creates the slide animation for all list elements
$(list_elements).each(function(i)
А чтобы меню «заезжало» обратно, в строке
slide(«#sliding-navigation», 25, 15, 150, .8); поменяйте 15 на 0
Артём
12 лет назад
как оказалось, ограничить параметры текста помогло: li { настройки текста }, а вот как вернуть к жизни слайд шоу так и не разобрался..
12 лет назад
Вся эта путаницу у тебя возникла пожалуй и за того, что много css файлов подключено и в каждом свои параметры. Ты объедини их в одни, и тогда будет работать и слайд-шоу и меню.
12 лет назад
Перешел с форму Маула, просмотрел несколько постов. А такие как этот действительно полезные, люблю всякие такие штучки на HTML.
Кстати, пробовал и в Опере и Мозилле, но большинство картинок в постах не вижу…
Zerg_w
12 лет назад
Спасибо!
Sergeant_Fuck
12 лет назад
Спасибо, хорошоее меню)
Много интересного в этом блоге, только вот Антиспам-программа сложная
(^_^)