Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

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

Скрипты меню 2012-Дек-15 OkJkeee 938 101 1

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

Это в Head на все страницы:

Code
<link href="/_css/screen.css" rel="stylesheet" type="text/css" media="screen" />


Это туда где хотим вывести меню:

Code
<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
Источник: не указан
1 комментарий
avatar
1
Ммм. очень интересная вещь!
avatar