Красивое анимированное меню. Три различных эффекта при наведении. - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Папка это?
Всего ответов: 1107
Статистика


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

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Меню для сайта

Красивое анимированное меню. Три различных эффекта при наведении.

Хочешь сказать спасибо? Кликни на рекламный баннер.

17.05.2012, 11:43
Красивое анимированное меню. Три различных эффекта при наведении.
Разметка HTML :
Code
<div id="menu">  <ul id="nav">   <li>   <a href="ВАША ССЫЛКА" class="icon1">   <span>Главная</span>   </a>   </li>   <li>   <a href="ВАША ССЫЛКА" class="icon2">   <span>Портфолио</span>   </a>   </li>   <li>   <a href="ВАША ССЫЛКА" class="icon3">   <span>Мой блог</span>   </a>   </li>   <li>   <a href="ВАША ССЫЛКА" class="icon4">   <span>Сервис</span>   </a>   </li>  </ul>  </div>


В CSS :
Code
/*======== Horizontal menu =========*/   #menu {  width: 100%;  background: #a7cfdf; /* Old browsers */  background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */  background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */  background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* Opera 12+ */  background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* IE10+ */  background: radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  position: relative;  margin-top: 100px;  border-top: 4px solid #eee;  border-bottom: 4px solid #FFF;  overflow: hidden;  }    #nav {  z-index: 99999;  margin:0;  padding:0;  }     #nav li a,#nav li {  float:left;  }     #nav li {  list-style:none;  position:relative;  }     #nav li a {  padding: 0 10px;  width: 130px;  height: 102px;  text-decoration:none;  margin:0;  font-size:12px;  font-weight:400;  text-transform:uppercase;  text-align: center;  color:#FFF;  }     #nav li a.icon1 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/11.png) no-repeat center 0;  }  #nav li a.icon2 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/22.png) no-repeat center 0;  }  #nav li a.icon3 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/33.png) no-repeat center 0;  }  #nav li a.icon4 {  background: url(http://mega.ucoz.ua/demo/menuSurprise/44.png) no-repeat center 0;  }     #nav li a span{  position: absolute;  top: 70px;  left:0;  right: 0;  font-size: 17px;  color:#cfcfcf;  }     #nav li a:hover span{  color:#fff;  }  /*======== Horizontal menu =========*/


Ставим перед < / body > :
Code
<script type="text/javascript" src="http://mega.ucoz.ua/demo/menuSurprise/js/jquery.backgroundPosition.js"></script>  <script type="text/javascript" src="http://mega.ucoz.ua/demo/menuSurprise/js/jquery.easing.1.3.js"></script>  <script type="text/javascript">  $(function(){   $('#nav li a')   .css( {backgroundPosition: "52px -240px"} )   .mouseover(function(){   $(this).stop().animate({backgroundPosition:"(52px 10px)"}, {duration:1500, easing : 'easeOutElastic'})   })   .mouseout(function(){   $(this).stop().animate({backgroundPosition:"(52px -240px)"}, {duration:500, easing : 'easeOutCubic', complete:function(){   $(this).css({backgroundPosition: "52px -240px"})   }})   })     });  </script>





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

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 5914 | Загрузок: 430 | Комментарии: 4 | Рейтинг: 3.8/10
Теги: красивое анимированное меню, скрипт, меню для сайта, меню
Всего комментариев: 4
Сообщение №3 от Сергей
Добавлен: 19.02.2016

объясните новичку, как вставить. Или ссылку на учебник
Сообщение №4 от Олег
Добавлен: 19.02.2016

Сергей, как вставить описано выше, проще некуда.
Я даже понятия не имею как ещё проще объяснить.
Сообщение №1 от дима
Добавлен: 01.05.2014

Я так понял что иконтой может служить маленькая фотка 40*40 ?
Сообщение №2 от Олег
Добавлен: 01.05.2014

используется картинка спрайт (48px × 300px), есть онлайн сервисы где делаются спрайты.
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

В теле взрослого человека около 75 километров нервов.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта