Суббота, 23.11.2024, 19:23 | Приветствую Вас Гость

Мой сайт

Каталог статей

Мега меню с помощью jQuery

Демо этого скрипта
В самом начале документа вставляем фреймворк jQuery, таблицу стилей и вспомогательную функцию.
Javascript
Code
<script type="text/javascript" src="jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
  <script type="text/javascript" src="jkmegamenu.js"></script>
<script type="text/javascript">

  jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
В коде выше Вы можете найти значение "mouseover". Его можно заменить на "click" и тогда меню будет открываться не при наведении, а при нажатии на ссылку.
Если на странице будет несколько меню, тогда необходимо будет несколько раз их инициализировать. Для этого достаточно нужное количество раз повторить строку jkmegamenu.definemenu() с классами, которые относятся к этому меню.
Далее в любом месте документа вставляем ссылку с id="megaanchor". Именно при наведении мышки на эту ссылку у нас будет появляться меню. После ссылки необходимо оформить разметку меню. Как Вы видите, все предельно просто: с помощью заголовков 3-го уровня и неупорядоченных списков мы можем создать любую конфигурацию.

HTML
Code

<a href="#" id="megaanchor">Это Мега Меню :)</a>
....
....
<div id="megamenu1" class="megamenu">
<div class="column">

  <h3>Web Development</h3>
  <ul>
  <li><a href="#">JavaScript Kit</a></li>
  <li><a href="#">Dynamic Drive</a></li>
  <li><a href="#">CSS Drive</a></li>

  <li><a href="#">Coding Forums</a></li>
  <li><a href="#">DOM Reference</a></li>
  </ul>
  </div>
<div class="column">
  <h3>News Related</h3>
  <ul>
  <li><a href="#">CNN</a></li>
  <li><a href="#">MSNBC</a></li>
  <li><a href="#">Google</a></li>
  <li><a href="#">BBC News</a></li>
  </ul>
  </div>
<div class="column">
  <h3>Technology</h3>
  <ul>
  <li><a href="#">News.com</a></li>
  <li><a href="#">SlashDot</a></li>
  <li><a href="#">Digg</a></li>
  <li><a href="#">Tech Crunch</a></li>
  </ul>
  </div>
<br style="clear: left" /> 
<div class="column">
  <h3>Web Development</h3>
  <ul>
  <li><a href="#">JavaScript Kit</a></li>
  <li><a href="#">Dynamic Drive</a></li>
  <li><a href="#">CSS Drive</a></li>
  <li><a href="#">Coding Forums</a></li>
  <li><a href="#">DOM Reference</a></li>
  </ul>
  </div>
<div class="column">
  <h3>News Related</h3>
  <ul>
  <li><a href="#">CNN</a></li>
  <li><a href="#">MSNBC</a></li>
  <li><a href="#">Google</a></li>
  <li><a href="#">BBC News</a></li>
  </ul>
  </div>
<div class="column">
  <h3>Technology</h3>
  <ul>
  <li><a href="#">News.com</a></li>
  <li><a href="#">SlashDot</a></li>
  <li><a href="#">Digg</a></li>

  <li><a href="#">Tech Crunch</a></li>
  </ul>
  </div>
</div>

С помощью стилей придаем данному блоку относительное позиционирование. Благодаря этому можем размещать дополнительные блоки внутри.
В скрипте jkmegamenu.js есть два значения, которые можно изменить для модификации скорости и продолжительности появления меню:
effectduration: 300, //продолжительность анимации в милисекундах
delaytimer: 200, //задержка перед тем, как меню должно спрятаться в милисекундах
От себя добавлю с помощью этого скрипта можно сделать кучу интересных вешей например вид материалов (сам сделал )))
самое главное чтоб была фантазия =)На сегодня все! Хороших Вам выходных!

Скачать «Мега меню с помощью jQuery»
Источник материала: http://ruseller.com

Источник: http://forucoz.com/

Категория: Скрипты для ucoz | Добавил: Timka (13.05.2010)

Просмотров: 311 | Теги: меню | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела

Скрипты для ucoz [408]

Шаблоны для ucoz [0]

Графика для ucoz [5]

Как раскрутить сайт [28]

Видеоуроки для Ucoz [0]

Всё для фотошопа [0]

Видеоуроки фотошопа [0]

Заработок на сайте [1]

Советы по uCoz [2]

Статистика
Онлайн всего: 1 Гостей: 1 Пользователей: 0

Поиск

Теги

Опрос
Как вам новый дизайн? Отлично Пойдёт Не очень Лажа Результаты \| Архив опросов Всего ответов: 31