В одном из уголков Интернет-магазина нужно разместить длинное вертикальное меню с категориями товаров. Но вот из-за большого количества позиций оно будет слишком длинным и скучным. Если к такому меню применить эффект трассирования, станет ли оно оригинальнее и привлекательнее?
Не станем тянуть слона за уши, а сразу перейдем реализации эффекта трассирования. Для этого нам сначала нужно создать HTML-разметку будущего меню
<ul>
<li><a href=
http://darkghost.pp.ua/»/#/»>Телефоны</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Ноутбуки</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Чайники</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Кофемолки</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Плиты</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Холодильники</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Стиральные машины</a></li>
<li><a href=
http://darkghost.pp.ua/»/#/»>Утюги</a></li>
</ul>
Ну вот, как-то так. Теперь же нужно оформить этот код в вертикальное меню и делаем это с помощью CSS.
Ширина контейнера допустим будет 230 единиц и цвет фона пускай будет – 303728
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;
}
И вот, что в результате наших стараний получилось
В завершении осталось устранить отображение вертикального меню в различных браузерах. Для более современных браузеров, для пунктов меню с большой длительностью перехода (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;
}
Посмотреть пример можно по ссылке >>>>
При копировании материала — прямая, активная, индексируемая ссылка на источник
обязательна