私が達成しようとしていることはほとんど不可能のようです。
jQueryに依存する水平レイアウトを作成しようとしていますが、Javascriptをオフにしても使用できます。また、セマンティック値を維持したまま、可能な限りクリーンなコードが必要です。だから私は究極の解決策を探していると思います。:)
Webで最も一般的な水平レイアウトは次のとおりです。http ://www.queness.com/resources/html/scroll/horizontal.html-これは完璧です(JSがオフの場合でも機能します)。私の問題は、それを「双方向」で機能させる必要があることです(左右の「開始」項目を中央に配置)。
効果は次のようになります。http://steveandjacqs.com/ Webサイト(およびコーディングバックエンド)は素晴らしいですが、JSなしでは使用できず、コードはハックでいっぱいです。
私の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のコピーパスタなので、気楽にやってください。:)
アップデート
ホームページに入るときに内部リンクを追加するために.htaccessを変更するのはどうですか?「http://example.com」を「http://example.com#home」に書き直しますか?レイアウトを「一般的な方法」でコーディングできるよりも(前のQuenessの例など)。