Любовь к спорту на всю жизнь
Привет, Гость!

  • Страница 1 из 1
  • 1
Форум » Всё для Ucoz » Меню для uCoz » Скрипт Красивое CSS / jQuery меню для сайта для ucoz
Скрипт Красивое CSS / jQuery меню для сайта для ucoz
Torres_1_Дата: Вторник, 03.08.2010, 16:16 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 2124
Награды: 0
Репутация: 12
Статус: Offline

Данное меню устанавливается в 4 этапа

1. Для начала нужно скачать архив и папку под названием main_menu закинуть в корень вашего сайта.
Скачать архив
2. Теперь нужно подключить css стили, для этого между... вставляем следующий код(на тех страницах где будет меню):
Код
<link rel="stylesheet" href="/main_menu/css/style.css" type="text/css" charset="utf-8"/>

3. Далее в нужное вам место ставим код самого меню:
Код
<ul id="navigation">
          <li class="home"><a href="Адрес ссылки"><span>Home</span></a></li>
          <li class="about"><a href="Адрес ссылки"><span>About</span></a></li>
          <li class="search"><a href="Адрес ссылки"><span>Search</span></a></li>
          <li class="photos"><a href="Адрес ссылки"><span>Photos</span></a></li>
          <li class="rssfeed"><a href="Адрес ссылки"><span>Rss Feed</span></a></li>
          <li class="podcasts"><a href="Адрес ссылки"><span>Podcasts</span></a></li>
          <li class="contact"><a href="Адрес ссылки"><span>Contact</span></a></li>
</ul>
<li class="home"><a href="Адрес ссылки"><span>Home</span></a></li>

Выделенное зелёным изменяем на свое, а от класса, который я выделил красным, будет зависеть иконка данного пункта меню, при необходимости вы можете переставить их местами.

4. Ну и напоследок для получения эффекта анимации вставляем немножко jQuery перед закрывающимся тегом (либо в то же место, где и код меню):

Код
<script type="text/javascript" src="/main_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>


Готово.
 
Форум » Всё для Ucoz » Меню для uCoz » Скрипт Красивое CSS / jQuery меню для сайта для ucoz
  • Страница 1 из 1
  • 1
Поиск:
Навигация
Главная страница Форум сайта Создание сайтов на uCoz Заработок в интернете Уроки Photoshop Автомобиль от А до Я Электроника Всё для смартфонов Браузерные игры Музыка Последние комментарии Статистика
Развлечения
Сегодня день рождения у: Описание сайта
Новое на форуме
Опрос
Опрос сайта
Ваша операционная система:
javascript:; javascript:;
Всего ответов: 147

Общение
Загрузка…
Статистика
Зарег. на сайте
Всего: 267
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Администраторов: 1
Модераторов: 0
Проверенных: 1
Обычных юзеров: 264
Из них
Парней: 234
Девушек: 33
Друзья сайта
Возможен баннерообмен 81х31.Писать ЛС.
Дизайн от Torres_1_ | Хостинг от uCoz
Все материалы размещенные на сайте принадлежат их владельцам.
При копированимм материалов ссылка на источник обязательна!
Администрация не несет ответственности за содержание материала и убытки не возмещает.