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

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

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

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

demoскачать

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

1
2
3
4
5
6
7
8
9
10

<ul id="sliding-navigation">
	<li class="sliding-element">
<h3>Меню</h3>
</li>
	<li class="sliding-element"><a href="#">Ссылка 1</a></li>
	<li class="sliding-element"><a href="#">Ссылка 2</a></li>
	<li class="sliding-element"><a href="#">Ссылка 3</a></li>
	<li class="sliding-element"><a href="#">Ссылка 4</a></li>
	<li class="sliding-element"><a href="#">Ссылка 5</a></li>
</ul>

Между тегами <head></head> подключаем CSS файл, плагин jQuery и файл с фрейморком jQuery. Посмотрите код:

1
2

<script src="jquery.js" type="text/javascript"></script> 
<script src="sliding_effect.js" type="text/javascript"></script>

Шаг 2: Объяснение эффекта jQuery
Сам эффект запускается с файла sliding_effect.js при помощи  функции:
slide(navigation_id, pad_out, pad_in, time, multiplier)

navigation_id — название блока, в котором данный эффект будет использоваться
pad_out — основной отступ меню в состоянии с покоя
pad_in — отступ при наведении на меню
time — время «выпрыгивания» меню при загрузке страницы
multiplier — количество шагов  при выпрыгивании елементов меню

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



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



  1. bad-dcotor00 Сказал:
    23 февраля 2010

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

    Ответить
  2. Артём Сказал:
    23 февраля 2010

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

    Ответить
    • Webchester Сказал:
      23 февраля 2010

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

      Ответить
  3. Артём Сказал:
    24 февраля 2010

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

    Ответить
  4. Артём Сказал:
    24 февраля 2010

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

    Ответить
  5. Артём Сказал:
    25 февраля 2010

    как оказалось, ограничить параметры текста помогло: li { настройки текста }, а вот как вернуть к жизни слайд шоу так и не разобрался..

    Ответить
    • Webchester Сказал:
      1 марта 2010

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

      Ответить
  6. Алматинский полубомж Сказал:
    4 апреля 2010

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

    Ответить
  7. Zerg_w Сказал:
    16 июня 2010

    Спасибо!

    Ответить
  8. Sergeant_Fuck Сказал:
    7 ноября 2010

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

    Ответить

Прокомментировать

Метки: ,