Горизонтальная навигация с угловыми боковыми границами - Как обрабатывать «активное» состояние? - PullRequest
Новая
       29

Горизонтальная навигация с угловыми боковыми границами - Как обрабатывать «активное» состояние?

1 голос
/ 14 января 2012

Мне нужна помощь в мозговом штурме.

Я кодирую макет, который был составлен дизайнером, и пытаюсь придумать способ обработки горизонтальной навигации, имеющей наклонные края и переходящей от синего фона к белому фону при выборе ссылки.

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

http://i.stack.imgur.com/P34yI.gif

Поэтому моя проблема связана с тем, что элементы HTML являются прямоугольниками, а не прямоугольниками с угловатыми краями. Я сохранил угловой край с тенью в качестве фона CSS, и это работало нормально, пока я не понял, что каждая ссылка может стать белой, и в изображение BG встроена часть следующей ссылки, чтобы создать иллюзию угла, и таким образом, самой левой ссылке потребуется другой фон, чем средней ссылке, и самой правой ссылке и т. д. *

Я мог бы назначить уникальный класс / идентификатор (или использовать n-й дочерний элемент) для каждой ссылки, но я хотел бы сохранить гибкость решения, чтобы в будущем я мог добавить еще одну ссылку / вкладку.

Мне было любопытно, есть ли у кого-нибудь идеи о том, как создать этот внешний вид, возможно, используя CSS3 / HTML5 / или какой-нибудь прозрачный PNG и отрицательные поля или относительное позиционирование?

Я не прошу код или чтобы вы делали мою работу за меня :) Я просто ищу идеи - просто мозговой штурм сообщества. Если у кого-то есть какие-либо предложения, пожалуйста, дайте мне знать, это может привести меня к решению.

Спасибо !!

1 Ответ

1 голос
/ 15 января 2012

Предполагая, что вы используете структуру 'ul> li> a' для меню, я бы использовал два угловых фона (правый и левый ... правый - около 27px с тенью, левый - около 22px). Примените левый угол к <li>, а правый угол к <a>. Это даст вам двойные фоны для каждого элемента списка, поэтому вы должны использовать отрицательные поля с каждой стороны <li>, чтобы перекрыть их братьев и сестер. Затем используйте z-index, чтобы убедиться, что при наведении курсора или выделении, что пункт меню отображается поверх остальных. Я добавил дополнительные 30px отступов с обеих сторон, чтобы создать дополнительное пространство вокруг текста: 

li {
    margin-right: -27px;
    margin-left: -22px;
    padding-left: 52px;
    position: relative;
    background: url(leftcorner.jpg) left top no-repeat;
    background-color: #3aa1cc
}

li a {
    padding-right: 57px;
    background: url(rightcorner.jpg) right top
}

li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}

Я не проверял это, но думаю, что оно должно работать ... возможно, с некоторыми дополнительными настройками.

Это решение не включает тонкую внутреннюю тень ... для этого вам нужно будет использовать повторяющийся градиентный фон размером 1 пиксель на <li>, а затем использовать: before и: after псевдоэлементы для двух угловых фоновых изображений.

Кроме того, в моем коде я поместил два отдельных .jpgs (обычный и hover), но на самом деле вы должны использовать спрайт и background-position, чтобы не было вспышки во время загрузки изображения состояния при наведении.

...