Меню на z-index
16 Nov, 2006Больше чем два года назад(ужас) реализовывал свою идею меню, когда определенные пункты отображаются "впереди" всех остальных. Сейчас пришлось использовать идею повторно. Вот это меню в oldschool дизайне:
Идея
Идея тогда состояла в том, что бы впику методам моих гуру, у которых пересечение реализовывалось сложной логикой отрисовки картинок, сделать это при помощи простой отрисовки картинок, но с использоавнием свойства z-index, позволяющего как бы менять местами последовательность отображения блоков. То есть оставлять какой-то блок позади других. Свойcтво это по логике вещей как нельзя лучше подходит для данного случая, имхо.Вобщем о том как CSS в очередной раз спас мне жизнь :) пошагово и пойдет дальше рассказ.
HTML
Очевидный список:- <ul id="nav">
- <li><a id="n1" ...>Вакансии</a></li>
- <li><a id="n2"...>Резюме</a></li>
- ...
- <li><a id="n6" ...>Советы</a></li>
- </ul>
Картинка
Для меню я буду использовать вот такую картинку:
Все меню будет сделано лишь с использованием одной картинки - что позволит нам избежать всевозможных проблем с недозагрузкой некоторых пунктов меню.
CSS
Ну а теперь начинается самое интересное. z-index работает в ИЕ только для абсолютно позиционируемых элементов - это накладывает некоторые лишние правила на технику - которые я считаю ее основным недостатком. Но начнем с элементарных правил:- #nav a{
- display:block;
- width:159px;/*почти все пункты одинаковые у меня - но для двух я задаю отдельную ширину*/
- height:25px;
- background:transparent url(nav.gif) no-repeat 0 0;
- position:absolute;
- z-index:45
- }
Координаты каждого пункта(мы вынуждены их задавать, так как я хочу использовать z-index, а значит пункты должны быть с position:absolute), так что бы они пересекались так, как нам кажется красивым:
- #n1{left:0}
- ...
- #n5{left:533px}
- #n6{left:680px;}
Выше для каждого пункта (#nav a) мы уже указали фоновую картинку nav.gif, все что нужно теперь - указать координаты ее сдвига для каждого пункта меню, тут понадобятся рассчеты:
- a#n1{background-position:0 0}
- a#n1:hover, .a1 a#n1{background-position: 0 -25px}
- a#n2{background-position:-159px 0}/*фон для 2го пункта положения "покоя"*/
- a#n2:hover, .a2 a#n2{background-position:-159px -25px}/*фон для 2го пункта положения "здесь" и "hover"*/
- ...
- a#n6{background-position:-772px 0}
- a#n6:hover, .a6 a#n6{background-position:-772px -25px}
z-index для положения при наведенной мыши:
- #nav a:hover{z-index:50}
- .a1 #n1, .a2 #n2, .a3 #n3, .a4 #n4, .a5 #n5, .a6 #n6{z-index:55}
Картинки конечно не ахти ) но это то с чем мне пришлось работать, к сожалению. Мечтаю уже два года отрисовать для этой идеи stunning картинки.) Жаль я не Дидье.
В конце
- Пример меню и чуть более навороченное
- Пример моего с той же идеей двухлетней давности
- "Навигация по-русски" - мой пост двухлетней давности про эту идею
Вообще такие сложности с position:absolute мне были нужны только для поддержки ИЕ5.0 5.5, если их поддержка вам не нужна, можно легко обойтись комбинацией margin-left:-10px;position:relative c соответствующими изменениями z-index для подсвеченных пунктов. Прямо как поступил Александр Шабуневич в своей красивой теме для PMA.
10 комментариев к “Меню на z-index”