Простой способ сделать скучное длинное навигационное меню интересным элементом интерфейса веб проекта с помощью магии CSS. Подобная техника используется на сайте www.graphitedesign.com. Трассирующий "эффект" добавляется к элементам обычного списка, на основе которого строится меню. Конечно, результат будет виден только в новых браузерах, но обратная совместимость достигается практически без труда.
HTML
Пункты меню навигации размещаются в обычном неупорядоченном списке:
<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
Ничего сложного. Сначала устанавливаем ширину контейнера для навигации (в нашем случае контейнер - неупорядоченный список) и устанавливаем для него фоновый цвет.
ul{
width: 230px;
background-color: #303728;
}
Затем мы определяем стили для пунктов навигации. Устанавливаем блочный режим, так что вся область будет реагировать на курсор мыши. Задаем ширину, отступы и поля. Отступами сверху и снизу смещаем текст в центр пункта по вертикали. Установки завершает задание цвета текста и рамки снизу.
li a{
display: block;
width: 196px;
padding: 3px 4px;
margin: 5px 13px;
color: #969E8D;
border-bottom: 1px dotted #96BF1F;
}
Теперь настраиваем наш эффект трассировки. Устанавливаем контрастные цвета для фона и текста, а также задаем свойства перехода. Длительность перехода устанавливаем равной 0.01 секунды. Кажется, что слишком быстро? Но для нашего эффекта в самый раз.
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” для улучшения эффекта.
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;
}
Готово!