HTMLマークアップ
HTMLは、4つのセクションのタイトルとコンテンツの5つのメインセクションで構成されます。 コンテンツの各セクションには、独自のIDとクラスパネルがあります。 さらに、別のセクションを追加します。このセクションは、メインの4つのセクションの中にあり、クラスのコンテンツを持ちます。 ID #homeの最初のセクションにはコンテンツクラスのみが含まれ、内部に追加のブロックは含まれません。
<!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="panel"> <div class="content"> <h2>Portfolio</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /Portfolio --> <!-- About --> <div id="about" class="panel"> <div class="content"> <h2>About</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /About --> <!-- Contact --> <div id="contact" class="panel"> <div class="content"> <h2>Contact</h2> <p>Some content</p> <!-- ... --> </div> </div> <!-- /Contact -->
#headerセクションには、メインのタイトルとナビゲーションがあります。
<!-- Header with Navigation --> <div id="header"> <h1>Page Transitions with CSS3</h1> <ul id="navigation"> <li><a id="link-home" href="#home">Home</a></li> <li><a id="link-portfolio" href="#portfolio">Portfolio</a></li> <li><a id="link-about" href="#about">About Me</a></li> <li><a id="link-contact" href="#contact">Contact</a></li> </ul> </div>
現在、主なアイデアは、現在のセクションに遷移を追加するために、ターゲット擬似クラスを使用することです。 この例では、最初にページを上下に「反転」します（最初のデモを参照）。
CSS
まず、見出しとナビゲーションのスタイルを設定します。 他のすべてが動いていても、いつでも同じ場所にいることを望んでいます。
#header{ position: absolute; z-index: 2000; width: 235px; top: 50px; } #header h1{ font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000; } #navigation { margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3; } #navigation a{ color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px; } #navigation a:hover { background: #ddd; }
#homeを除くすべてのセクションにはパネルクラスがあります。 ここでは、このクラスを持つ要素がメニューで呼び出されるたびに遷移を使用します。 トリックは、「通常」状態のパネルクラスで負のインデントを使用し、ターゲット擬似クラスを使用するときにこのクラスにこのインデントがないことです。 遷移は、ページを一番上に残す効果を作成します。
.panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #000; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .panel:target{ margin-top: 0%; background-color: #ffcb00; }
次に、すべてのセクションにあるコンテンツクラスのスタイルを設定します。
.content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; } .content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px; }
ナビゲーションの現在の要素の色を変更するために、一般的な兄弟セレクターでターゲット擬似クラスを使用して、対応するナビゲーション項目を「検索」します。
#home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact{ background: #000; color: #fff; }
必要なのはそれだけです。 デモをチェックして、得られたものを確認してください。
デモ>
出所