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

23.02.2010   |  

jQuery   |  

Комментарии (9)

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

Сегодня будем рассматривать хорошее динамическое вертикальное меню, которое работает с помощью 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 замечательный забугорный сайт. Ну вроде все что хотел написать написал, думаю у Вас не появятся трудности с меню, а если что-то непонятно пишите в комент..Если Вам понравился статья тогда

У кого заказать продвижение сайтов?? только в компания «10-Топ» они знают как вывести Ваш сайт в 10-Топ ПС, за небольшую сумму, и главное, что у них все делается на совесть.

Интересные статьи:

  1. bad-dcotor00 23.02.2010 14:49

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

  2. Артём 23.02.2010 17:14

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

  3. Webchester 23.02.2010 19:12

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

  4. Артём 24.02.2010 17:47

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

  5. Артём 24.02.2010 18:54

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

  6. Артём 25.02.2010 19:13

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

  7. Webchester 01.03.2010 18:59

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

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

  9. Zerg_w 16.06.2010 02:56

    Спасибо!

Оставь свое мнение:




Подпишись на обновление блога