试图创建一个水平的网站。这个想法是使导航和页脚部分保持静态,而正文可以向左/向右滚动。
Here is an example.
但是,这并不是我所需要的。这将滚动整个页面,并且导航栏是固定的。
这是我想要实现的样机布局:
并且如果用户单击正文页面的导航2:
因此,我从上方的那个网站开始通过Chrome中的Inspect Element测试,我尝试了以下CSS:
body { max-width: 1000px; overflow: hidden; }
.panel { display: inline; }
我以为可以解决问题,但这只是使整个页面垂直。因此,然后我添加了
div id="top"
来封装home newsletter directions contact
和CSS:body { max-width: 1000px; overflow: hidden; }
.panel { display: inline; }
#top { width: 10000px }
哪个也没成功!
理想情况下,我希望页面完全无法滚动,并且仅当用户单击导航链接时才能向左/向右动画/滚动。
有任何想法吗?
谢谢。
最佳答案
只是给出一个想法,您可以使用css3 transform
属性来执行此操作。
将每个页面的内容保留在div中,将其翻译为100%
,以便在要显示时将其移出视口,将其翻译回0%
。
或将其缩放为0,然后在要显示时将其缩放为1。
您必须使用position
z-index
等
也许像这样FIDDLE