Горизонтальная навигация с боковыми границами под углом — как обрабатывать активное состояние?

Я ищу немного помощи мозгового штурма.

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

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

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

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

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

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

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

Спасибо!!


navigation css tabs angle
person LearnWebCode    schedule 14.01.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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}

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

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

Кроме того, в моем коде я поместил два отдельных файла .jpg (обычный и при наведении), но на самом деле вы должны использовать спрайт и фоновую позицию, чтобы не было вспышки во время загрузки изображения состояния при наведении.

person HandiworkNYC.com    schedule 14.01.2012
comment
Большое спасибо! Я не использовал ваше точное решение, но я использовал что-то очень похожее с отрицательными полями и z-индексом, как вы упомянули. Бесконечно благодарен! - person LearnWebCode; 15.01.2012