Question

我正在寻找一些头脑风暴协助。

我正在编写一个由设计师组合在一起的布局，并试图想办法处理具有倾斜边缘的水平导航，并在选择链接时从蓝色背景转到白色背景。

我实际上只是包含一个截图。这实际上是选项卡式内容区域的导航。屏幕截图的上半部分显示了选择第一个选项卡时的外观。屏幕截图的下半部分显示了第二个选项卡。

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

所以我的问题来自HTML元素是矩形，而不是带有角度边缘的矩形。我用阴影作为CSS背景保存了倾斜的边缘，并且工作正常，直到我意识到每个链接都可以变成白色并且BG图像有一些嵌入其中的下一个链接以给出角度的错觉，并且因此，最左边的链接需要不同的背景，然后是中间链接，最右边的链接等...

我可以为每个链接分配一个唯一的类/ id（或使用第n个子），但我希望保持解决方案的灵活性，以便将来添加其他链接/选项卡。

我很好奇是否有人对如何通过使用CSS3 / HTML5 /或某些透明PNG和负边距或相对定位创建此外观有任何想法？

我不是要求代码或者你为我做我的工作:)我只是在寻找想法 - 只是一些社区头脑风暴。如果有人有任何建议请告诉我，这可能会让我找到解决方案。

谢谢！

Answer 1

假设你正在使用'ul＆gt; li>菜单的结构，我会使用两个有角度的背景（左右两个......右边的一个是阴影约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}

我没有对此进行过测试，但我认为它应该可行......可能会进行一些额外的调整。

此解决方案不包含微妙的内部阴影...要做到这一点，您必须在<li>上使用1px重复渐变背景，然后使用：before和：after两个角背景的伪元素图像。

另外在我的代码中我放了两个单独的.jpgs（正常和悬停），但实际上你应该使用精灵和背景位置，这样在加载悬停状态图像时就没有闪光。

具有倾斜边框的水平导航 - 如何处理“活动”状态？

1 个答案: