Главная » 2013 » Январь » 27 » Простой эффект плавной смены цвета пункта меню при наведении на css3 (Скрипты для ucoz)
27.01.2013, 01:50

Простой эффект плавной смены цвета пункта меню при наведении на css3




Данное решение позволит вам осуществить простую плавную смену пунктов меню при наведении

Установка:

В то место, где должно быть меню:

Код
<ul class="leftNavigation">
  <li><a href="/iGR/">iGR Inc</a></li>
  <li><a href="/eurospares/">Eurospares</a></li>
  <li><a href="/pcs/">Performance Car Solutions</a></li>
  <li><a href="/rcm/">The Royal College of Midwives</a></li>
  <li><a href="/juiceDoctor/">Juice Doctor</a></li>
  <li><a href="/hospitalityLine/">Hospitality Line</a></li>
  <li><a href="/rePlanning/">Robinson Escott Planning</a></li>
  <li><a href="/excel/">Excel</a></li>
  <li><a href="/logosBranding/">Logo Design & Branding</a></li>
  <li><a href="/cdCovers/">CD Covers</a></li>
  <li><a href="/greenwichPartners/">Greenwich Partners</a></li>
  <li><a href="/bakersTreat/">Bakers Treat</a></li>
  <li><a href="/avantiEnvironmental/">Avanti Environmental</a></li>
  <li><a href="/bar-B-Kings/">Bar-B-Kings</a></li>
  <li><a href="/chpSurveyors/">chpSurveyors</a></li>
  <li><a href="/mortonMichel/">Morton Michel</a></li>
  <li><a href="/openLoopGeothermal/">Open Loop Geothermal</a></li>
  <li><a href="/tandcPrinters/">T&C Printers</a></li>
  </ul>


В самый низ вашего css вставляйте:
Код
Код
.leftNavigation {
  width: 230px;
  background-color: #303728;
}

.leftNavigation li {
list-style:none;
}

.leftNavigation li a{
  display: block;
  color: #969E8D;
  width: 196px;
  padding: 3px 4px;
  margin: 5px 13px;
  border-bottom: 1px dotted #96BF1F;
   
   
  -moz-transition: background-color .3s ease-in;
  -webkit-transition: background-color .3s ease-in;
  -o-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

.leftNavigation li a:hover, .leftNavigation li a.selected{
  background-color: #96C11F;
  color: #fff;
  -moz-transition: background-color 0.01s;
  -webkit-transition: background-color 0.01s;
  -o-transition: background-color 0.01s;
  transition: background-color 0.01s;
}
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://ruseller.com
Категория: Скрипты uCoz | Просмотров: 1563 | Добавил: sold93 | Рейтинг: 0.0/0 |
Теги: эффект, при, Цвета, на, смены, наведении, плавной, простой, меню, пункта
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]