Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Март » 30 » Эффект "трассирования" для навигации
13:47
Эффект "трассирования" для навигации

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


Простой способ сделать скучное длинное навигационное меню интересным элементом интерфейса веб проекта с помощью магии 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;

}

 

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.netmagazine.com/tutorials/swishy-css3-navigation
Перевел: Сергей Фастунов

Категория: HTML/CSS | Просмотров: 769 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Введение в информатику
[Прогараммирование]
Строковый тип данных
[Безопасность систем]
Резервирование и восстановление
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Прогараммирование]
Динамическая память
[Менеджмент]
Факторы микросреды организации
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Прогараммирование]
Файлы

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2024Конструктор сайтов - uCoz