« Вращающееся меню из пяти разделов для uCoz »

Описание материала:

Хочу представить Вам не плохое, вращающееся меню, из пяти разделов, для сайтов в системе uCoz. Данное меню сделано из CSS и JS, так же в меню присутствуют иконки, размером 45x45(в архиве есть PSD иконок). Как работает меню: При установки на свой сайт данного меню, у Вас появится с правой стороны пять иконок, если навести на один из разделов курсор мыши, то оно плавно открывается влево и в тоже время крутится иконка. В нашем случае, мы сделали такие разделы как - Главная, Архив файлов, Помощь, Контакты и Поиск. Посмотреть меню в деле, можно на Демо странице, ссылку на Демо находится в низу материала.

Установка:
1. Скачиваем архив с нашего сайта, загружаем папку menu_ie к корень своего сайта
2. Заходим в ПУ - Управление дизайном, выбираем место куда будете ставить меню и ставим данный код в выбранное место:

Код
<link rel="stylesheet" href="/menu_ie/css/style.css" type="text/css" media="screen"/>
  <div class="menu">
  <div class="item">
  <a class="link icon_search"></a>
  <div class="item_content">
  <h2>Поиск</h2>
  <p>
  <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin:0px" action="/search/">  
  <input placeholder="Введите текст..." class="search-bar" type="text" name="q" maxlength="45" onclick="if (this.value=='Поиск...'){this.value='';}"/>
  <i class="search-btn fa fa-search"></i>
  <form>
  </p>
  </div>
  </div>
  <div class="item">
  <a class="link icon_contact"></a>
  <div class="item_content">
  <h2>Контакты</h2>
  <p>
  <a href="#">ВКонтакте</a>
  <a href="#">Твиттер</a>
  <a href="#">Фейсбук</a>
  </p>
  </div>
  </div>
  <div class="item">
  <a class="link icon_help"></a>
  <div class="item_content">
  <h2>Помощь</h2>
  <p>
  <a href="#">Шаблоны</a>
  <a href="#">Скрипты</a>
  <a href="#">Информеры</a>
  </p>
  </div>
  </div>
  <div class="item">
  <a class="link icon_archive"></a>
  <div class="item_content">
  <h2>Архив файлов</h2>
  <p>
  <a href="#">Шаблоны</a>
  <a href="#">Скрипты</a>
  <a href="#">Информеры</a>
  </p>
  </div>
  </div>
  <div class="item">
  <a class="link icon_home"></a>
  <div class="item_content">
  <h2>Главная</h2>
  <p>
  <a href="/">Главная</a>
  <a href="/forum">Форум</a>
  </p>
  </div>
  </div>
  </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/menu_ie/js/jquery-css-transform.js" type="text/javascript"></script>
<script src="/menu_ie/js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script>
  $('.item').hover(
  function(){
  var $this = $(this);
  expand($this);
  },
  function(){
  var $this = $(this);
  collapse($this);
  }
  );
  function expand($elem){
  var angle = 0;
  var t = setInterval(function () {
  if(angle == 1440){
  clearInterval(t);
  return;
  }
  angle += 40;
  $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
  },10);
  $elem.stop().animate({width:'278px'}, 1000)
  .find('.item_content').fadeIn(400,function(){
  $(this).find('p').stop(true,true).fadeIn(600);
  });
  }
  function collapse($elem){
  var angle = 1440;
  var t = setInterval(function () {
  if(angle == 0){
  clearInterval(t);
  return;
  }
  angle -= 40;
  $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
  },10);
  $elem.stop().animate({width:'52px'}, 1000)
  .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
  }
</script>


Готово!


Скачать ( Размер архива 73.0 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 520 | Загрузок: 16


Поделиться в соц. сетях:
Комментариев к материалу: 2
Нормально в первые вижу.
1
Владислав 19.02.2016 в 19:27Спам
Интересненько)
1
avatar