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

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

Здравствуйте! Сегодня, в данном материале, мы будем устанавливать не плохое, плавное выпадающие меню с иконками, на сайт в системе uCoz. При установке меню, оно появится на вашем сайте вверху, в правой стороне и будет видно только название раздела, а если навести курсор на один из разделов, то оно плавно выпадет и Вы там увидите иконку к разделу, размер иконки 64x64. Если Вам не подходит цвет меню или Вам не нравятся иконки, то Вы можете загрузить свои и легко изменить в CSS стилях меню, которые находятся в архиве материала. Меню подойдет как под светлый дизайн сайта, так и под светлый, тематика сайта может быть любая. Меню сделано из HTML, CSS и JS кодов.

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

Код
<link rel="stylesheet" href="/skr_menu/style.css" type="text/css" charset="utf-8"/>
<div class="header"></div>
<ul id="navigation">
<li class="home"><a href="/"><span>Главная</span></a></li>
<li class="forum"><a href="/forum"><span>Форум</span></a></li>
<li class="load"><a href="/load"><span>Каталог файлов</span></a></li>
<li class="sites"><a href="/dir"><span>Каталог сайтов</span></a></li>
<li class="news"><a href="/news"><span>Новости сайта</span></a></li>
<li class="video"><a href="/video"><span>Каталог видео</span></a></li>
<li class="contact"><a href="/index/0-3"><span>Контакты</span></a></li>
</ul>

<script type="text/javascript" src="/skr_menu/jquery-1.3.2.js"></script>
<script type="text/javascript">
  $(function() {
  var d=300;
  $('#navigation a').each(function(){
  $(this).stop().animate({
  'marginTop':'-80px'
  },d+=150);
  });

  $('#navigation > li').hover(
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-2px'
  },200);
  },
  function () {
  $('a',$(this)).stop().animate({
  'marginTop':'-80px'
  },200);
  }
  );
  });
</script>

Готово!


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

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

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

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

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

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


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


Поделиться в соц. сетях:
Комментариев к материалу: 5
А можно ли цет поменять, ну и положение сделать сбоку?
0
Цвет чего текста, или Фона. Ну если текста то да, на счет положение скорей всего да.
0
Виктор Ягодин 11.02.2016 в 15:44
Цвет можно поменять)
0
Владислав 10.02.2016 в 22:37Спам
Ага, интересно выглядит) Необычно
1
Красиво.
1
avatar