Динамичное меню с помощью jQuery

23 февраля 2010 года, Размещено в категории: jQuery / MooTools

Динамичное меню

Сегодня будем рассматривать хорошее динамическое вертикальное меню, которое работает с помощью JavaScript, а точнее на библиотеки jQuery.
Мне лично очень понравились эффекты меню, и Вы сами можете оценить посмотрев демо, и скачать исходники меню...

Шаг 1: HTML код
Делаем каркас нашего меню из списка <ul> </ ul>


	
Меню

	Ссылка 1
	Ссылка 2
	Ссылка 3
	Ссылка 4
	Ссылка 5

Между тегами <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 — количество шагов при выпрыгивании елементов меню

Кстати автором данного меню является net.tutsplus замечательный забугорный сайт. Ну вроде все что хотел написать написал, думаю у Вас не появятся трудности с меню, а если что-то непонятно пишите в комент..Если Вам понравился статья тогда

Мой блог находят по следующим фразам
• флеш плееры для сайта
• плавное перемещение к якорю jquery
• как сделать фон на сером картоне
• http://dicim.net/kak-sdelat-ikonku-dlya-sajta-ili-kak-sdelat-favicon.html
• вывод иконок из архива zip в html через css
• фоновый рисунок сайта загружался быстро

Интересно будет почитать:

11 комментариев

bad-dcotor00

10 лет назад Ответить

Отличный подарок к 23 февраля! 🙂
Только вот ссылку надо бы поправить. Там архив с журналом, а не исходники.
Артём

10 лет назад Ответить

blogonewsnewdiz5 это точно то? я не нашёл в архиве css файла и ява скрипта…
- Webchester
  
  10 лет назад Ответить
  
  Все ссылку поправил, извиняюсь за ошибочку. Кстати всех с праздником 🙂
Артём

10 лет назад Ответить

У меня возникла проблема: после установки меню большая часть текста на странице поменяла цвет на жёлтый, а некоторый текст увеличился раза в 2-3, и исчёзла стрелочка из слайд шоу http://dicim.net/?p=757 ,а также теперь по умолчанию стоит последний слайд, и с него нельзя переключитсья не на один другой, подскажите пожалуйста как решить.
Артём

10 лет назад Ответить

При редактировании CSS стиля этого меню, вся информация на странице тоже изменяеться, как ограничить влияние этого стиля, чтобы дальше меню стиль не распространялся?
- eXtra
  
  8 лет назад Ответить
  
  Может поможет кому.
  Чтобы на странице не менялась вся инфа от стиля меню, в файле скрипта замените
  // 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
Артём

10 лет назад Ответить

как оказалось, ограничить параметры текста помогло: li { настройки текста }, а вот как вернуть к жизни слайд шоу так и не разобрался..
- Webchester
  
  10 лет назад Ответить
  
  Вся эта путаницу у тебя возникла пожалуй и за того, что много css файлов подключено и в каждом свои параметры. Ты объедини их в одни, и тогда будет работать и слайд-шоу и меню.
Алматинский полубомж

10 лет назад Ответить

Перешел с форму Маула, просмотрел несколько постов. А такие как этот действительно полезные, люблю всякие такие штучки на HTML.
Кстати, пробовал и в Опере и Мозилле, но большинство картинок в постах не вижу…
Zerg_w

10 лет назад Ответить

Спасибо!
Sergeant_Fuck

10 лет назад Ответить

Спасибо, хорошоее меню)
Много интересного в этом блоге, только вот Антиспам-программа сложная
(^_^)