1

私はhtml/html5は初めてですが、プログラミングは初めてです。個人のWebサイトをコーディングしようとしています。基本に関する多くのリソースとチュートリアルを読みましたが、必要なレイアウトを実現するためのヒントを探しています。

私のレイアウト（ここ）では、ページの左半分を固定ナビゲーションパネルとして表示し、現在のページを強調表示する画像を表示します。次に、各オプションを使用すると、右側が新しい独立してスクロールするページに更新され、強調表示された画像がアニメーション化されます。ナビゲーションパネルで新しいオプションに移動します。

どうすればこのようなことを達成できますか？要素/スクリプト/実装する必要のあるもののタイプに正しい方向にプッシュする必要があります。

ありがとうございました！

4

3 に答える 3

0

に設定されている要素内にメニューが格納されています。position: fixed;

位置を固定すると、残りをスクロールしてもメニューがページ上で移動しないようになります。

次に、javascript を使用して、ウィンドウ (またはスクロールを監視する div) の「スクロール」のイベント リスナーを追加できます。これが起動したら、scrollY プロパティをチェックして、それがどの範囲にあるかを確認し、メニュー内の特定の項目を強調表示します。

うまくいけば、これがあなたを正しい道に導きます。それは広い質問なので、ここに広い答えがあります！

于 2013-02-01T20:49:50.227 に答える
0

以下は、最初に役立つ簡単な例です。

jsフィドル

スクロールすると右側のテキストが画面からはみ出しますが、緑色のボックスは同じ位置にとどまります。これは、わずかな CSS で行われます。

左側のナビゲーション div はposition: fixed;. これにより、ナビゲーション div が常に 1 か所に保持されます。

対照的に、右側のコンテンツ div は with でスタイルposition: absolute;設定されていleft: 25%ます。ナビゲーション div とコンテンツ div の幅はパーセンテージで設定されます。これにより、ウィンドウが大きくても小さくても、コンテンツは同じ相対的な画面スペースを占めることができます。コンテンツは視聴者の解像度に適応します。

意志を使用する<iframe>ことは、右側のコンテンツ div のコンテンツを変更するための 1 つの可能な解決策です。もう 1 つは使用するajaxことですが、それを最大限に活用するには、クライアントとサーバーのスクリプトを理解する必要があるため、少し高度になっています。

iFrame

アヤックス

情報が静的で頻繁に変更されない場合は、コンテンツ div に追加された複数のテンプレートを使用して単一ページの Web アプリを作成することを検討できます。

jQuery

jQuery テンプレート プラグイン

jQuery は JavaScript の学習にも非常に優れており、動的なクライアント側アプリケーションを簡単に構築できます。

また、ajaxサポートもあります。

jQuery アヤックス

お役に立てれば。

頑張って、ハッピーコーディング！

于 2013-02-01T20:59:04.427 に答える
0

@Jeromy Frenchからの提案に賛成です。 Bootstrap、Foundation、およびその他のレスポンシブ フレームワークには多くの 利点があると思います。

Bootstrap を使用した例を次に示します: http://jsfiddle.net/panchroma/2dF6s/

HTML5であることに加え、スマートフォンからワイドデスクトップまで対応するレイアウトが得られます。これは、モバイル フレンドリーな Web サイトを取得する唯一の方法ではありませんが、いくつかの優れたオプションの 1 つです。

現在、スマートフォンやタブレットへの移行が非常に進んでいるため、レスポンシブ Web サイトやモバイル Web サイトについて学べば学ぶほど、将来的にはより良いものになると思います.

すべてのレスポンシブ フレームワークはグリッド ベースのシステムを使用していると思います。Bootstrap を使用した HTML は次のようになります。 

<div class="container">
<div class="row-fluid" align="center">
    <div class="span12">
        <h1>Header</h1>
    </div><!-- close span12 -->
</div> <!-- close row -->

<div class="row">

<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">

<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->

<div class="span9">
<p>Main Content Here </p>
 </div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->

幸運を！

于 2013-02-02T23:52:08.897 に答える