【发布时间】：2012-11-20 21:59:44
【问题描述】：
看来，我想要达到的目标几乎是不可能的。
我正在尝试创建一个依赖于 jQuery 的 水平布局，但即使关闭了 Javascript 也可以使用。我还希望保留其语义值的最干净的代码。所以我想我正在寻找最终的解决方案。 :)
Web 上最常见的水平布局是这样的：http://www.queness.com/resources/html/scroll/horizontal.html - 这将是完美的（即使关闭 JS 也能正常工作）。我的问题是我需要让它“双向”工作（左右，中间有“开始”项目）。
效果应该是这样的：http://steveandjacqs.com/网站（和编码后端）很棒，但是没有JS就无法使用，代码中充满了hack。
我的 CSS：
html,body { overflow: hidden; }
.wrapper { position: relative; width: 100%; height: 100%; }
.wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; }
#item-left { position: absolute: top: 0px; left: 0%; }
#item-home { position: absolute; top: 0px; left: 200%; }
#item-right{ position: absolute; top: 0px; left: 400%; }
#item-down { position: absolute; top: 200%; left: 0%; }
我的 HTML：
<body>
<nav><ul>
<li><a href="#item-left">Left</a></li>
<li><a href="#item-home">Home</a></li>
<li><a href="#item-right">Right</a></li>
<li><a href="#item-down">Down</a></li>
</ul></nav>
<div class="wrapper">
<div class="wrapper-cont">
<div id="item-left">Element outside viewport on the left side</div>
<div id="item-home">Element on the center of viewport</div>
<div id="item-right">Element outside viewport on the right side</div>
<div id="item-down">Element on the center of viewport but down</div>
</div>
</div>
</body>
我的 JAVASCRIPT 将在各个部分之间使用某种平滑动画插件（可能是scrollTo？）。浏览器滚动（至少垂直）应该被禁用，DIV 本身应该是可滚动的。
///
我应该发布我的网站截图还是这样可以理解？
提前谢谢你！
PS：我或多或少是 jQuery copypasta，所以请放轻松。 :)
更新
修改.htaccess 增加进入首页的内部链接：将“http://example.com”改写为“http://example.com#home”？比我可以用“常用方式”编写布局（例如 Queness 的前一个例子）。
【问题讨论】：
-
您希望菜单保持不变吗？还是带上家居用品？
-
它应该与家居用品一起使用。老实说，我以后可能会改变它。 :)
标签： jquery layout scroll usability horizontal-scrolling