Question

情况： 我为html5网页创建了一个全屏停留导航，包括显示为图像的链接。我使用图像是因为特殊的悬停效果，这在代码中是不可能的。这意味着我的链接，例如Home，About，Portfolio，Contact是由图像（而不是文本）组成的，并显示在列表中。

我为每个链接创建了两个图像：1表示正常状态，1表示悬停状态。我使用了这里显示的替换img技术：

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}

问题：导航在大屏幕上运行良好，但在缩小视口时会出现问题。由max-width控制的图像表现为彼此分离，并且在缩小屏幕时不以相似的速率缩放。当然，这涉及最大的图像（击中视口边界）首先缩放，然后缩小。在我的情况下：投资组合图像将比主页图像更早地缩放。这导致奇怪的导航，因为图像在某些时候的大小不同。

我考虑过的其他一些要素：

我可以为较小的屏幕制作较小的图像，但这会使很多图像过载。
我可以使所有图像与最大图像的尺寸相同。但这意味着较小的单词在单词的左侧和右侧会有空格。这个空的空间也会激活悬停状态，这使它看起来很奇怪（悬停状态激活，而我不在链接本身（视觉上，不是技术上）。

问题： 在缩小视口时，如何使用基于图像的导航并平均缩小导航链接/图像？

我做了一个JSFiddle进行测试：DEMO

提前致谢。

Answer 1

我已经看了一段时间，我开始认为这是不可能的。问题的根源在于每个图像都需要知道最大的图像，或者至少每个Public Function GetTheNumbers(st As String) As String ary = Split(st, ";#") GetTheNumbers = "" For Each a In ary If IsNumeric(a) Then If GetTheNumbers = "" Then GetTheNumbers = a Else GetTheNumbers = GetTheNumbers & ", " & a End If End If Next a End Function都需要知道其他图像＆＃39;动态高度，这是某种DOM操作所不可能的。即使使用flexbox，我也无法完成这项工作。

我的建议是使用PNG透明度创建相同宽度的每个图像，然后只使用图像映射来激活每个图像的按钮区域上的悬停状态。这有点工作，但我无法想到更好的方法。有关制作图像地图的方法，请参阅this StackOverflow question。

响应式设计：基于图像的导航＆gt;同等比例图像

1 个答案: