1

CSS を使用して異なるコンテンツ間を移動する単一ページのサイトを作成しようとしています。

:targetこのサイトは Chrome、Firefox、IE9 以降、Safari、Opera 9.5 以降でのみ動作することを読み、理解しました。

一度に 1 つのセクションしか表示されない CSS のみのナビゲーションを実装するにはどうすればよいですか?

4

1 に答える 1

2

フルデモ

はこのメニューを使用します。

レイアウト

これを行うには、最初にドキュメントをレイアウトして、複数.pageの があり、それぞれが一意の ID を持つようにします。

<div class="page" id="home">
  <h1>Home</h1>
  <div class="body">
  </div>
</div>

次に、メニュー、またはリンクを含むその他の構造を作成します。これらには、ID と一致するハッシュが必要です。たとえば、id="home"とhref="#home".

<ul>
    <li><a href="#home">HOME</a></li>
</ul>

CSS

次に、ページをどのように遷移させるかを決定する必要があります。と の組み合わせを使用することにtopしましたopacity。

また、要素の初期位置をページの上部に設定することを強くお勧めします。これらのリンクのいずれかをクリックすると、ブラウザーは自動的に要素の左上を表示します。水平または垂直に移動する場合は、その中に要素を配置し、その位置を遷移させます (たとえば、h1または.body)。

.page {
  width: 100%;
  position: absolute;
  top: -500em; left: 0;
  max-height: 0;
  transition: all .5s ease; /* vendor prefixes recommended */
  pointer-events: none;
}

:targetURL のハッシュが要素 ID と等しい場合、 のスタイルはすべて有効になります。たとえば、このスタイルは、URL のハッシュが#home.pageいつ有効になります。#home

.page:target {
  max-height: 300%;
  pointer-events: auto;
  top: 13em; 
}

アクティブなページの子をアニメーション化することもでき.page:target h1ます.page h1:target。

.page > h1, .page > .body {
  transition: all .5s  cubic-bezier(1, .38, .70, 0);
  opacity: 0;
}

.page:target > h1, .page:target > .body {
  opacity: 1;
}

JavaScript (オプション)

JavaScript ユーザーを少し助けるために、#homeまだハッシュが設定されていない場合にデフォルトにするようページに指示できます。

location.hash = location.hash || "home";

Apache のmod_rewrite.

于 2013-08-07T22:38:44.547 に答える