Динамичное меню с помощью 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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо!
Sergeant_Fuck

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

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