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

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

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

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

demoскачать

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

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

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






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

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

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

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

    blogonewsnewdiz5 это точно то? я не нашёл в архиве css файла и ява скрипта…

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

      Все ссылку поправил, извиняюсь за ошибочку. Кстати всех с праздником 🙂

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

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

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

    При редактировании CSS стиля этого меню, вся информация на странице тоже изменяеться, как ограничить влияние этого стиля, чтобы дальше меню стиль не распространялся?

    • 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 { настройки текста }, а вот как вернуть к жизни слайд шоу так и не разобрался..

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: