Эффект "трассирования" для навигации

Простой способ сделать скучное длинное навигационное меню интересным элементом интерфейса веб проекта с помощью магии CSS. Подобная техника используется на сайте www.graphitedesign.com. Трассирующий "эффект" добавляется к элементам обычного списка, на основе которого строится меню. Конечно, результат будет виден только в новых браузерах, но обратная совместимость достигается практически без труда. 

HTML


Пункты меню навигации размещаются в обычном неупорядоченном списке:

Code
<ul>
  <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="/greenwichPartners/">Greenwich Partners</a></li>
  <li><a href="/bar-B-Kings/">Bar-B-Kings</a></li>
</ul>


CSS


Ничего сложного. Сначала устанавливаем ширину контейнера для навигации (в нашем случае контейнер - неупорядоченный список) и устанавливаем для него фоновый цвет.

Code
ul{
  width: 230px;
  background-color: #303728;
}


Затем мы определяем стили для пунктов навигации. Устанавливаем блочный режим, так сто вся область будет реагировать на курсор мыши. Задаем ширину, отступы и поля. Отступами сверху и снизу смещаем текст в центр пункта по вертикали. Установки завершает задание цвета текста и рамки снизу.

Code
li a{
  display: block;
  width: 196px;
  padding: 3px 4px;
  margin: 5px 13px;
  color: #969E8D;
  border-bottom: 1px dotted #96BF1F;
}


Теперь настраиваем наш эффект трассировки. Устанавливаем контрастные цвета для фона и текста, а также задаем свойства перехода. Длительность перехода устанавливаем равной 0.01 секунды. Кажется, что слишком быстро? Но для нашего эффекта в самый раз.

Code
li a:hover{
  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;
}


Если вы посмотрите, как выглядит страница в браузере, то станет понятно, как старые браузеры будут выводить нашем меню. Добавим несколько строк CSS кода для пользователей современных браузеров. Будем использовать дополнительные переходы для пунктов меню с большей длительностью (0.3 секунды). Также добавим функцию перехода "ease-in” для улучшения эффекта.

Code
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;
}


Готово!

  • FalleN

  • 1969

  • 1

  • 175

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!