Анимированное меню на основе jQuery

Скрипты

Рисунок Анимированное меню на основе jQuery
Анимированное меню на основе jQuery Анимированное меню на основе jQuery
оценка: 4.9 из 5
оценок: 9

Будем создавать вертикальное меню, работающее на основе фреймворка jQuery с анимацией при разворачивании и сворачивании. Вложенность - 2 уровня: пункты и подпункты. Количество пунктов и подпунктов неограничено. Это меню не занимает много места и подойдет для сайтов, где большая вложенность, но нет желания занимать ссылками много места.

Для начала нужно подключить jQuery к странице. Для этого в теле блока HEAD нужно прописать следующий код:

Code
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>

Если ваш сайт сделан на основе CMS UCOZ, то подключать jQuery не нужно.

Теперь создаем само меню. Его сделаем на основе DIV блоков. Код выглядит так:

Code
<div class="menu">
  <div class="item">
    <a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 1</a>
    <div class="subitem">
      <a href="#">Подпункт 1</a>
      <a href="#">Подпункт 2</a>
      <a href="#">Подпункт 3</a>
    </div>
  </div>
  <div class="item">
    <a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 2</a>
    <div class="subitem">
      <a href="#">Подпункт 1</a>
      <a href="#">Подпункт 2</a>
    </div>
  </div>
  <div class="item">
    <a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 3</a>
    <div class="subitem">
      <a href="#">Подпункт 1</a>
      <a href="#">Подпункт 2</a>
    </div>
  </div>
  <div class="item">
    <a href="javascript://" class="itemopen" title="Развернуть"> + </a> <a href="#">Пункт 4</a>
    <div class="subitem">
      <a href="#">Подпункт 1</a>
      <a href="#">Подпункт 2</a>
      <a href="#">Подпункт 3</a>
      <a href="#">Подпункт 4</a>
      <a href="#">Подпункт 5</a>
    </div>
  </div>
</div>

В меню меняете ссылки и текст ссылки на свои. Классы не меняем! На одной странице можно разместить любое количество таких менюшек. При этом код будет работать в любом случае.

Теперь нужно задать для нашего меню стили. Для этого прописываем в теле HEAD следующий код:

Code
<style type="text/css">
  div.menu a{
    font-family: tahoma;
    text-decoration: none;
  }  
  
  div.menu div.item a.itemopen{
    display: inline-block;
    text-align: center;
    width: 15px;
  }
  
  div.menu div.subitem a{
    display: block;
  }
  
  div.menu div.item{
    font-size: 12pt;
    width: 140px;
    border: 1px solid #77DAFF;
    background: #C6EEFD;
    padding: 1px 3px;
    overflow: visible;
  }
  
  div.menu div.item div.subitem{
    font-size: 10pt;
    width: 110px;
    height: 20px;
    padding: 1px 5px 1px 25px;
    display: none;
    background: #C6EEFD;
  }
</style>

Я привел лишь пример. Окончательный внешний вид вы можете подогнать сами.

Теперь нужно вставить код самого скрипта, который будет сворачивать и разворачивать меню. Этот коднужно разместить прямо перед закрывающим тегом BODY в конце страницы. Код скрипта:

Code
<script type="text/javascript">
  $(document).ready(function(){
    $('div.subitem').hide();
    var speed='fast';
    $('div.menu a.itemopen').click(function(){
      if($(this).parent().find('div').css('display')=='none'){
        $(this).parent().parent().find('div.subitem').hide(speed);
        $(this).parent().parent().find('a.itemopen').html(' + ');
        $(this).parent().parent().find('a.itemopen').attr('title','Развернуть');
        $(this).parent().find('div.subitem').show(speed);
        $(this).parent().find('a.itemopen').html(' - ');
        $(this).parent().find('a.itemopen').attr('title','Свернуть');
      }else{
        $(this).parent().parent().find('div.subitem').hide(speed);
        $(this).parent().parent().find('a.itemopen').html(' + ');
        $(this).parent().parent().find('a.itemopen').attr('title','Развернуть');
      }
    });
  });
</script>

Теперь меню на основе jQuery полностью работоспособно. Рабочий пример можно увидеть тут:

На этом заканчиваю. Удачи в ваших свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Анимированное меню на основе jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:8910
Рейтинг:4.9/9
Дата добавления:2010-04-22 03:08, Четверг
Добавил:Szen
Теги:jQuery, меню

Мини-форум

№ 02010-04-22 03:08
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Анимированное меню на основе jQuery".
Гость
Учавствовать в обсуждении "Анимированное меню на основе jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Как вы используете файл-хостинги?
Всего ответов: 170
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 11
Гостей: 8
Пользователей: 3

SergeyDut, oi_bogidanov1965, PetrDut
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz