Периодически мне для вёрстки попадаются макеты в навигации у которых присутствуют перекрывающиеся по краям кнопки. Часто таким образом выделяют пункт меню открытой в данный момент страницы. У некоторых это вызывает некоторые трудности в реализации. В связи с этим выкладываю простой пример с подобным эффектом.
В качестве навигации используем список:
1 2 3 4 5 6 7 | <ul> <li><a href="" title="">О нас</a></li> <li><a href="" title="">Новости</a></li> <li class="active"><span>Услуги</span></li> <li><a href="" title="">Портфолио</a></li> <li><a href="" title="">Контакты</a></li> </ul> |
Перекрывание кнопок осуществляется засчёт отрицательных внешних отступов, а позиционирование активного пункта поверх остальных с помощью z-index.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | ul{ list-style-type:none; font-size:0.9em; color:#fff; height:50px; width:505px; margin:0 auto } ul li{ float:left; border-right:solid 1px #fff; position:relative; z-index:5; background:#96B1D4 url(images/lc.gif) no-repeat -5px top; text-align:center } ul li.active{ z-index:10; background:#9A2D7F url(images/lc.gif) no-repeat left -5px; border:none; margin:0 -9px 0 -10px; top:-10px } ul li a{ float:left; display:block; padding:10px 0; background:url(images/rc.gif) no-repeat 95px top; text-decoration:none; color:#fff; width:100px } ul li span{ float:left; display:block; padding:15px 0; position:relative; background:url(images/rc.gif) no-repeat 109px -5px; width:119px } |
Как видите ключевыми свойствами в примере являются margin и z-index применяемые к элементам li, остальные можно в той или иной степени менять по своему усмотрению.
Ха, а на первый взгляд казалось, что все очень сложно)
Спасибо.
Спасибо за решение. Только сегодня дали макет с подобным меню, не придется даже задумываться
У меня почему-то эта фишка в IE8 работать отказала.
Глючит? Или дело глубже?
Должно работать. По крайней мере у меня под Вистой так.
Спасибо, действительно все гениальное просто
Здрасти, что то я пылся сделать переключение между вкладками но рабочего результата не добился, может кто по сообразительнее подскажет как сие чудо сотворить.
Буду ну очень презнателен.
Что вы пытались сделать?
хотел сделать переключение между вкладками создал несколько доп файлов где указал class=»active» для необходимой ссылки но после перехода на вкладку ничего не происходит а она(вкладка на которую мы переходим)должна становиться такой как при навидении(то есть актиной) вот, чего у меня и не получилось сделать. Уфф…Вроде доступно объяснил.
Если можете, выложите куда-нибудь свой пример.
я разозлился и удалил, ща постораюсь восоздать.
http://backtobay.com/test/index.htm вот мое творение, попробуйте прейти между вкладками «О нас» и «Новости»
Вы взяли стили для второго списка, а вам нужны для первого (тот который
.nav1). Посмотрите внимателней как в примере реализовано.Вот nav1 http://backtobay.com/test2/index.htm немного другой глюк
Пожалуйста, посмотрите внимательнее пример, а именно к какому списку какие стили применяются.
Хорошая идея и реализация. Протестировал в Firefox 3, IE7, Opera 10, Chrome, Safari 3 под Windows. Глюков не заметил. Спасибо, возьму на вооружение.
Цвета не очень, а вообще ничего
Пример хорош, но: тут перекрываются края всего у одной кнопки (выделенной), поэтому решение с z-index вполне интуитивно. Гораздо больше проблем с дизайнами, где перекрываются края всех кнопок (например, доволно часто встречающиеся табы с косыми гранями). Может быть, тема получит развитие в продолжении? )
Если нужно что бы каждая последующая кнопка накладывалась на предыдущую, то это также реализуеться с помощью отрицательного левого отступа, только для всех пунктов а не для одного.
Если же нужно чтобы наоборот, то тут посложнее. Помниться где-то на хабре была статья с примером.
У меня под Ubuntu 9.04 все отлично работает. Спасибо за решение!
Спасибо, только сегодня узнал, зачем нужен z-index. До этого никогда не пользовался
Работает в Firefox 3.5 и IE8 под windows 7.
Спасибо за статью! В избранное.
Спасибо может пригодиться когда нить.
Спасибо! Очень в тему )))) Метод простой, думала js применять придется, а от оно как ))))
Мерси, снимаю шляпу )
Добрый день! спасибо. все работает) мне больше понравился 2й тип… Только одно НО… при попытке изменить ширину кнопки, почему-то остальные перебегают на строчку ниже… почему? объясните мне, древу. пожалуйста, что я не так делаю
Здравствуйте! Скажите, а можно это решение сделать таким образом, чтобы не активный пункт меню — это была кнопка — картинка — иконка, а при наведении эта картинка увеличилась и внизу ссылка с подписью высветилась этого пункта? Или есть готовые варианты? Спасибо!
Здравствуйте….у меня почему-то не получается сделать верхние края срезанными как у Вас помогите пожалуйста