Меню на z-index

16 November, 2006

XHTML/CSS, Дизайн

Больше чем два года назад(ужас) реализовывал свою идею меню, когда определенные пункты отображаются “впереди” всех остальных. Сейчас пришлось использовать идею повторно. Вот это меню в oldschool дизайне:
меню с пересекающимися пунктами

Идея

Идея тогда состояла в том, что бы впику методам моих гуру, у которых пересечение реализовывалось сложной логикой отрисовки картинок, сделать это при помощи простой отрисовки картинок, но с использоавнием свойства z-index, позволяющего как бы менять местами последовательность отображения блоков. То есть оставлять какой-то блок позади других. Свойcтво это по логике вещей как нельзя лучше подходит для данного случая, имхо.

Вобщем о том как CSS в очередной раз спас мне жизнь :) пошагово и пойдет дальше рассказ.

HTML

Очевидный список:

  1. <ul id="nav">
  2. <li><a id=”n1″ …>Вакансии</a></li>
  3. <li><a id=”n2″…>Резюме</a></li>
  4. <li><a id=”n6″ …>Советы</a></li>
  5. </ul>

Проще некуда. id нужны так как каждый элемент навигации мы заменяем на картинку, потому нам нужно их различать.

Картинка

Для меню я буду использовать вот такую картинку:

картинка использовавшася для меню

Как видно – в ней хранятся все пункты меню, вдобавок они же – но в положении “здесь” и :hover.(синие). Так же в отличие от техники которая меня вдохновила два года назад – картинки не пересекаются между собой – что заметно упрощает их отрисовку, в отличие от этого варианта.

Все меню будет сделано лишь с использованием одной картинки – что позволит нам избежать всевозможных проблем с недозагрузкой некоторых пунктов меню.

CSS

Ну а теперь начинается самое интересное. z-index работает в ИЕ только для абсолютно позиционируемых элементов – это накладывает некоторые лишние правила на технику – которые я считаю ее основным недостатком. Но начнем с элементарных правил:

  1. #nav a{
  2. display:block;
  3. width:159px;/*почти все пункты одинаковые у меня – но для двух я задаю отдельную ширину*/
  4. height:25px;
  5. background:transparent url(nav.gif) no-repeat 0 0;
  6. position:absolute;
  7. z-index:45
  8. }

(я опустил технику замены текста внутри ссылок на картинки, для простоты)

Координаты каждого пункта(мы вынуждены их задавать, так как я хочу использовать z-index, а значит пункты должны быть с position:absolute), так что бы они пересекались так, как нам кажется красивым:

  1. #n1{left:0}
  2. #n5{left:533px}
  3. #n6{left:680px;}

Пункты навигации теперь расположены где надо, дело за фоновыми картинками…

Выше для каждого пункта (#nav a) мы уже указали фоновую картинку nav.gif, все что нужно теперь – указать координаты ее сдвига для каждого пункта меню, тут понадобятся рассчеты:

  1. a#n1{background-position:0 0}
  2. a#n1:hover, .a1 a#n1{background-position: 0 -25px}
  3. a#n2{background-position:-159px 0}/*фон для 2го пункта положения “покоя”*/
  4. a#n2:hover, .a2 a#n2{background-position:-159px -25px}/*фон для 2го пункта положения “здесь” и “hover”*/
  5. a#n6{background-position:-772px 0}
  6. a#n6:hover, .a6 a#n6{background-position:-772px -25px}

a#n6 – собственно фон для 6го пункта навигации, для этого как видно надо сдвинуть наш фон на 772 пиксела влево.
a#n6:hover и .a6 a#n6 – положение фоновой картинки при наведенной мыши, и в положении “здесь”.

z-index для положения при наведенной мыши:

  1. #nav a:hover{z-index:50}

Я задаю z-index:50(>45) что бы при наведении мыши пункты отображались поверх соседних – как бы всплывали из-за них.
CSS для сигнализации “я здесь”:

  1. .a1 #n1, .a2 #n2, .a3 #n3, .a4 #n4, .a5 #n5, .a6 #n6{z-index:55}

Теперь нам достаточно менять класс для UL на a1,..,a6 и при этом будут подсвечиваться соответствующие пункты навигации, более того, так как z-index мы им задаем 55, то есть больше чем 50 и 45, то они будут отображаться еще и перед соседними пунктами(и даже перед соседними наведенными пунктами). Что и приносит собсно тот эффект ради которого это все и придумывалось.
Полюбуйтесь этим меню в действии

Картинки конечно не ахти ) но это то с чем мне пришлось работать, к сожалению. Мечтаю уже два года отрисовать для этой идеи stunning картинки.) Жаль я не Дидье.

В конце

Ничего особо сложного в меню нет, но опять же, идея мне нравится, вдруг кому еще и пригодится.
Если вы скажете что я извращенец что такое делал ) то не ошибётесь. Но другого способа сделать меню с пересекающимися пунктами я не знаю.(не считая отрисовки сложных картинок). Если у Вас есть идеи по этому поводу буду рад услышать!

Вообще такие сложности с position:absolute мне были нужны только для поддержки ИЕ5.0 5.5, если их поддержка вам не нужна, можно легко обойтись комбинацией margin-left:-10px;position:relative c соответствующими изменениями z-index для подсвеченных пунктов. Прямо как поступил Александр Шабуневич в своей красивой теме для PMA.

XHTML/CSS, Дизайн

10 комментариев к “Меню на z-index”

Flack | 1. 16 November, 2006

Все-таки для русскоязычного сайта навигация, не работающая с отключенными картинками — хреново.

akella | 2. 16 November, 2006

Да, ты прав, но это прямого отношения к идее не имеет – потому я старался все как можно сильнее упростить. Надо все же делать спаны там еще и испоьзовать что то подобрее к народу с отключенными картинками – к которому я сам сейчас принадлежу

CB | 3. 17 November, 2006

Как-то странно расставлены табиндексы в примере.

akella | 4. 17 November, 2006

там обратный отсчет idшников – что бы по дефолту задать более логичное перекрытие – то есть – те что левее будут перекрывать тех что правее в навигации.

Пешков Артём | 5. 4 December, 2006

Интересно! :) Уже нашел применение. Хотя доработать идею конечно можно :)

MrooT | 6. 14 December, 2006

Спасибо за статью… CSS рулит

ZDN | 7. 26 December, 2006

Спасибо за интересный материал

Заработок в Интернет | 8. 23 March, 2007

Да-м век живи, век учись. Действительно классная статья, которую я в своё время искал. Правда потом перешёл на другое..
Респект.

Ребёнок | 9. 31 May, 2007

Долго искал что-нибудь похожее, а сейчас, когда уже сделал другой вид навигации, нашёл. Респект автору.

promo | 10. 31 August, 2007

Спасибо за статью – помогла разобраться в некоторых моментах.
Добавил в закладки.

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