Статьи -> Интересные скрипты -> Навигационная матрица.
Навигационная матрица.
Недавно я нашел очень интересный способ создания навигации сайта при помощи CSS и матрицы изображений. Этот метод был отлажен и описан на сайте Дэна Рабина. Мне этот способ показался достаточно простым, оригинальным и вполне работоспособным. Попробую доступно изложить его суть.
В данном примере использованы возможности CSS и чистый семантический XHTML вместо часто используемых таблиц. Так как весь метод основан исключительно на изображениях, может возникнуть проблема с доступностью навигации, что, впрочем, тоже решаемо. Все закладки работают и связаны с 4-мя индивидуальными страницами (welcome.html, products.html, support.html и contact.html) которые загружают один и тот же stylesheet.
Как это работает
Казалось бы этот пример ничем не выделяется среди других подобных способов отображения навигационных элементов. Но наиболее интересная часть заключается в самом способе и методике. Мой пример называется навигационной матрицей, потому что он фактически использует матрицу нарисованных элементов, чтобы правильно отобразить элементы навигации. Ниже я включил изображение(образ) навигационной матрицы, которая загружается лишь один раз.
Вы видите, что матрица содержит все необходимые изображения для отображения элементов навигации в различных состояниях (active, inactive, rollover, active-rollover). В сущности, весь метод основан на смещении позиции изображения, что работает несколько быстрее, чем смена различных изображений. Каждому элементу навигации назначается уникальный id и привязывается определенная область фонового изображения. Единственная сложность в точном установлении позиции матрицы для каждого элемента, поэтому матрица была предварительно размечена по-пиксельно, что, некоторым образом, облегчило задачу.
Пример (welcome.html)
<body id="homepage"> <ul id="nav"> <li id="wel"><a xhref="welcome.html" mce_href="welcome.html">welcome</a></li> <li id="pro"><a xhref="products.html" mce_href="products.html">products</a></li> <li id="sup"><a xhref="support.html" mce_href="support.html">support</a></li> <li id="con"><a xhref="contact.html" mce_href="contact.html">contact</a></li> </ul> <body>
CSS
ul#nav { position: relative; margin: 0 auto 0 auto; width: 650px; padding: 0; border: 5px solid #fff; height: 120px; background: #666 url(header.png) no-repeat left top; list-style-type: none; } ul#nav li a { position: absolute; top: 68px; width: 84px; text-indent: -9000px; text-decoration: none; padding: 22px 0 0 0; overflow: hidden; height: 0px !important; height /**/:22px; /* IE5/Win */ background: #666 url(nav_f.png) no-repeat; } body#welcome li#wel a { background-position: 0 -44px; width: 94px; left: 188px; } body#welcome li#wel a:hover { background-position: 0 -44px; } body#welcome li#pro a { background-position: -94px 0; left: 282px; } body#welcome li#pro a:hover { background-position: -94px -22px; } body#welcome li#sup a { background-position: -178px 0; left: 366px; } body#welcome li#sup a:hover { background-position: -178px -22px; } body#welcome li#con a { background-position: -262px 0; left: 450px; } body#welcome li#con a:hover { background-position: -262px -22px; }
Ни в HTML коде, ни в таблице стилей CSS не использовано никаких новых приемов. Всего лишь точное позиционирование фонового изображения для каждого элемента навигации.
Преимущества метода
У этого метода есть большое количество преимуществ перед классическими методами. Наличие всего одного изображения для навигации также делает удобным изменение цветов или стиля навигации в будущем. Изменение цветов будет требовать редактирования только одного файла. В целом этот пример не является революционным и не показывает Вам ничего нового. Однако это комбинирует несколько уловок, которые делают это интересным и полезным методом.