CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Навигация по-русски

Какое-то время назад мне очень понравились две статьи. Одну написал Dan Cederholm, называлась она "Accessible Image-Tab Rollovers", а вторую Didier Hilhorst и называлась она "Navigation Matrix" (и продолжение "Navigation Matrix Reloaded"). Обе статьи посвящены построению навигации на базе картинок.

Второй метод мне не понравился некоторой запутанностью в подсчетах и рисовании этой самой навигации. Хотя конечный визуальный эффект был гораздо лучше, чем в первом. А метод Cederholm'a был практически без недостатков. Вот мне и взбрело в голову их объединить.

А именно я хотел сделать такую же навигацию как сейчас на nundroo.com, но по своему. Вот что получилось.

XHTML

Естественно я взял для навигации обычный список. Вот такой:

<ul>
<li><a href='#' id='n-first'>first</a></li>
<li><a href='#' id='n-second'>second</a></li>
<li><a href='#' id='n-third'>third</a></li>
<li><a href='#' id='n-forth'>forth</a></li>
</ul>

Думаю излишне объяснять почему он лучше всего для этого подходит.

Графика

Картинки, которые я использовал вы можете видеть слева. Для смены изображений я использовал маленький трюк с изменением позиции фона. Это делается что бы избежать мигания при наведении (flicker) и дозагрузки картинок. Для такого мелкого разборчивого текста мне пригодились шрифты с сайта dsg4.com. Как хорошо, что в этом мире есть что то бесплатное.

А это CSS который я использовал для задания фона навигации.

 #nav a{
  width:73px;
  background:  url(../n-home.gif) 0 -21px no-repeat;
	}
  #nav #second{
  background:  url(../n-art.gif) 0 -21px no-repeat;
	}
 #nav #third{
  background:  url(../n-arch.gif) 0 -21px no-repeat;
	}
 #nav #forth{
  background:  url(../n-exit.gif) 0 -21px no-repeat;
	}
 #nav #sfirst:hover, #nav #second:hover, 
 #nav #third:hover, #nav #forth:hover{
  background-position: 0 0;
	}
 #nav a#first {
  background-position: 0 0;
	}

Тут конечно можно упростить, но не в этом сейчас суть.
Последнее праввило говорит о том, что ссылка #first активная. Разумеется для всей навигации нужно будет написать несколько таких правил.

CSS

За основу я взял пример приведенный в статье Cederholm'a. То есть все позиционирование и весь CSS я взял оттуда. Если сейчас посмотреть на то что вышло то мы бы увидели что-то вроде этого:

Этого мало

Но мне этого понятно оказалось мало. Хотелось что бы активный элемент навигации находился на переднем плане перекрывая соседних. Да и те в свою очередь перекрывали соседей. Решение пришло само: использовать z-index. И тут моё решение неожиданно усложнилось. Оказывается , z-index можно использовать лишь для абсолютно позиционированных блоков. Пришлось добавить такие строки:

#first{
left:0;
}
#second{
left:63px;
}
#third{
left:126px;
}
#forth{
left:189px;
}

Такие рандомные числа я взял не с головы. Просто ширина всех картинок была 73px. Плюс каждую сместил на 10px что бы они пересекались (то чего я так хотел).

Теперь дорога была свободна и я применил z-index:

#first{
z-index:13;
}
#second,#third,#forth{
z-index:7;
}

Естественно что эту часть я использовал лишь для случая когда активная ссылка #first. Для полноценной навигации нужно будет задать для каждого body свой селектор. Тогда через CSS можно будет доделать навигацию.

А пока можете посмотреть на то что у нас получилось. Вот скриншот:

Заключение

После того как закончил я посмотрел как сделана навигация на nundroo.com. Оказалось там он использовал для свей навигации одну картинку. И соответственно не мог использовать HOVER эффекты. Моя же состоит из нескольких и поэтому в чем то проще для поддержки. Хотя это и спорный вопрос. В остальном навигация обладает всеми преимуществами CSS. Доступность, мало весит и т д. И неплохо поддерживается в броузерах. Я успел проверить лишь IE 6 и FireFox. И там никаких проблем не было.

Если вы что-то заметите отзывайтесь в комментарии

Видимо скоро такая навигация появится на этом сайте. Поскольку пиксельные шрифты меня заразили своей ... пиксельностью.

Результат

• Действуещее меню , которое я сделал (переключаться можно только между первыми двумя элементами, недостаток времени сказался) UPDATE: уже работает все.
• "Accessible Image-Tab Rollovers".
• "Navigation Matrix"
• "Navigation Matrix Reloaded"