cssing :: Архив :: Меню на z-index

16 ноября, 2006

Меню на z-index

Больше чем два года назад(ужас) реализовывал свою идею меню, когда определенные пункты отображаются “впереди” всех остальных. Сейчас пришлось использовать идею повторно. Вот это меню в 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. …
5. <li><a id=”n6″ …>Советы</a></li>
6. </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. …
3. #n5{left:533px}
4. #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. …
6. a#n6{background-position:-772px 0}
7. 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, Дизайн