css“框架式”导航菜单的窗口大小调整布局中断

Question

如果您点击此处：http://www.ideagasms.net/index2，您会看到横幅菜单环绕横幅图像，如框架。它是用三个div来组合的，其中两个是css旋转90度，绝对位置。当然，只要调整窗口的大小，navmenu就会打破。

必须有更好的方法来构建一个框架式菜单。一些建议或例子，我只需要关于如何构建这样的东西的想法。也许一个jQuery解决方案或其他东西可以做到这一点。

Answer 1

您可以更改#nav-left和#nav-right位置绝对的，然后用left: 50%中心他们（像你这样做#headerwrapper），并纠正自己的立场与利润，例如margin: 0 auto 20px 122px为#nav-right。

Answer 2

用position: relative;（但没有任何top/left/bottom/right属性）标记它们的父元素，这样旋转的导航元素将被定位在它们的父级而不是窗口内。

但是，我认为你的导航概念是新颖的，但从可用性的角度来看很糟糕（并且在视觉上不吸引人），因为人们无法轻松阅读旋转的英文文本。