Недавно я нашел очень интересный способ создания навигации сайта при помощи CSS и матрицы изображений. Этот метод был отлажен и описан на сайте Дэна Рабина. Мне этот способ показался достаточно простым, оригинальным и вполне работоспособным. Попробую доступно изложить его суть.
В данном примере использованы возможности CSS и чистый семантический XHTML вместо часто используемых таблиц. Так как весь метод основан исключительно на изображениях, может возникнуть проблема с доступностью навигации, что, впрочем, тоже решаемо. Все закладки работают и связаны с 4-мя индивидуальными страницами (welcome.html, products.html, support.html и contact.html) которые загружают один и тот же stylesheet.
Как это работает
Казалось бы этот пример ничем не выделяется среди других подобных способов отображения навигационных элементов. Но наиболее интересная часть заключается в самом способе и методике. Мой пример называется навигационной матрицей, потому что он фактически использует матрицу нарисованных элементов, чтобы правильно отобразить элементы навигации. Ниже я включил изображение(образ) навигационной матрицы, которая загружается лишь один раз.
Вы видите, что матрица содержит все необходимые изображения для отображения элементов навигации в различных состояниях (active, inactive, rollover, active-rollover). В сущности, весь метод основан на смещении позиции изображения, что работает несколько быстрее, чем смена различных изображений. Каждому элементу навигации назначается уникальный id и привязывается определенная область фонового изображения. Единственная сложность в точном установлении позиции матрицы для каждого элемента, поэтому матрица была предварительно размечена по-пиксельно, что, некоторым образом, облегчило задачу.
Ни в HTML коде, ни в таблице стилей CSS не использовано никаких новых приемов. Всего лишь точное позиционирование фонового изображения для каждого элемента навигации.
Преимущества метода
У этого метода есть большое количество преимуществ перед классическими методами. Наличие всего одного изображения для навигации также делает удобным изменение цветов или стиля навигации в будущем. Изменение цветов будет требовать редактирования только одного файла. В целом этот пример не является революционным и не показывает Вам ничего нового. Однако это комбинирует несколько уловок, которые делают это интересным и полезным методом.
Быстрый переход к содержимому сайта Karman.com.ua:
Новости, советы, углубленные знания, знания для новичков, законодательство, интересные скрипты, фотогалереи, отчеты, статьи о хостинге: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 Часто задаваемые общие вопросы о хостинге, про FTP, PHPMyAdmin и MySQL, CPanel, Предустановленные скрипты, WHM, Cron, .htaccess, SSH, Паролирование директорий,
О доменах, о работе с сайтом, о Раскрутке сайта, об Электронной почте, про Основы web-программирования: 0, 1 Энциклопедия основных терминов хостинга, программного обеспечения, железной стороны хостинга, технологий, электронной почты и доменов: 0, 1, 2, 3, 4, 5, 6 Сайты о хостинге (форумы, хостинг-провайдеры, студии веб-дизайна, домен-регистраторы, инструментарии в помощь вебмастеру): 0, 1, 2
В данном примере использованы возможности CSS и чистый семантический XHTML вместо часто используемых таблиц. Так как весь метод основан исключительно на изображениях, может возникнуть проблема с доступностью навигации, что, впрочем, тоже решаемо. Все закладки работают и связаны с 4-мя индивидуальными страницами (welcome.html, products.html, support.html и contact.html) которые загружают один и тот же stylesheet.