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

1 September, 2004

XHTML/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>

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

Графика

navigation

Картинки, которые я использовал вы можете видеть слева. Для смены изображений я использовал маленький трюк с изменением позиции фона. Это делается что бы избежать мигания при наведении (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 я взял оттуда. Если сейчас посмотреть на то что вышло то мы бы увидели что-то вроде этого:
navigation

Этого мало

Но мне этого понятно оказалось мало. Хотелось что бы активный элемент навигации находился на переднем плане перекрывая соседних. Да и те в свою очередь перекрывали соседей. Решение пришло само: использовать 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 можно будет доделать навигацию.

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

Заключение

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

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

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

Результат

XHTML/CSS, Дизайн, Полезности

12 комментариев к “Навигация по-русски”

witness | 1. 2 September, 2004

Классно, есть правда “маленькая” сложность в данной технологии – когда меню генерится движком, то максимум что мы можем получить – это id=”current” к активному пункту меню. А конструкция:

<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>

вообще нереализуема.

Что касается еще нереализованных, но безусловно очень интересных технологий в меню:
<li><a href="#"><img src="img24.png (c градиентной прозрачностью)" />text</a></li>
<li><a href="#"><img src="image24.png" (c градиентной прозрачностью)/>text2</a></li>

li a {background: url(1.gif);}
li a:hover {background: url(2.gif);}

нечто подобное у http://www.blogger.com/start
но полупрозрачностью там и не пахнет

witness | 2. 2 September, 2004

ой, код не отформатировал : (

akella | 3. 2 September, 2004

Да это ж я так на скорую руку, я уже почти доделал на CSS полностью. То есть генерировать будет как раз first second и так далее, но задав для каждого BODY свой ID можно будет ВСЮ навигацию переключать из CSS.
Было б куда её приставлять там и подогнал бы.
Главное идея новая , с z-index по-моему еще не игрались в навигациях…
И главное, что меня в ней беспокоит это читабельность..

Yukki Pospel | 4. 3 September, 2004

Движок можно пропатчить. Например на ТextPattern мне такое удалось сделать. И по-моему лучше все-таки не id, а class использовать, с точки зрения правильности конструкции.

akella | 5. 3 September, 2004

Могу только добавить, что wordpress просто создан для настройки. Минимум знаний пхп и все.
А почему класс? В принципе разницы то никакой. Я исходил из того, что внутри страницы этот АЙДИ встретиться лишь один раз. Но с другой стороны если рассмотреть весь сайт то на каждой странице повториться. Ты это имел виду видимо…
Тут я с тобой согласен.

boffin | 6. 1 December, 2004

“…Для такого мелкого разборчивого текста мне пригодились шрифты с сайта dsg4.com…”
А с поддержкой русских букв, что-нибудь подобное есть?

akella | 7. 1 December, 2004

Вот вроде тут есть с поддержкой кириллицы.(внизу страницы среди бесплатных)
http://miniml.com/fonts/.
Это то что было под рукой, еще найду вышлю, или сюда добавлю.
Но вообще для себя я подобную проблему решил частичным транслитом. то есть например русская буква Р уже есть и т д.

boffin | 8. 2 December, 2004

to akella
спасибо, если найдешь не забудь запостить.. :)

Wad | 9. 4 June, 2008

Идея хорошая с наложением закладок, если учесть что работаешь с бекграундом… а можно ли решить подобную задачу на основе раздвижных дверей…
было бы неплохо рассмотреть подобную конструкцию кода, люди помогите я как раз мучаюсь над этой проблемой но пока ничего не получилось…

Леонид | 10. 27 January, 2009

Господа, не подскажете пожалуйста, как сделать меню, открывающееся внутрь экрана на CSS. Меню работает, но с правой стороны при при открытии ссылок, они уходят за предел экрана. Я не большой специалист в этих технологиях. По мере надобности изучаю. Использую свои проги на работе для сотрудников.

Спасибо заранее.

cssing :: Архив :: Разделители в меню | 11. 9 December, 2009

[…] “Навигация по-русски” – пост двухлетней давности про эту идею […]

Valet - персональный блог, заметки о SEO, жизни и прочей фигне » Blog Archive » Хроника ? рика | 12. 3 March, 2010

[…] О навигации сайта Способ оформления ссылок на сайте Навигация по-русски Навигация вида «Хлебные крошки» – элемент улучшения […]

Оставить комментарий