CSS3単一ページ縦固定navigation_html/css_WEB-ITnose

単一ページ、特に製品紹介ページをデザインして、ページのさまざまな重要な部分 (ノード) を関連付けるシンプルなナビゲーション バーを使用する開発者が増えています。この例では、ページは複数の重要なノードで構成されています。ページの片側に複数の単純なナビゲーション ポイントが表示され、ドットをスライドすると、対応するノード部分の名前が表示されます。ナビゲーションバーの位置は固定されたままになります。

デモのダウンロード ソース コードを表示する

画面が十分に小さい場合 (携帯電話など)、アイコンをタッチしてナビゲーション メニューを展開します。メニューページを対応するノードまでスクロールすると、その効果は非常にクールです。

HTML

ナビゲーション バーは、nav.cd-vertical-nav に含まれる順序なしリスト ul であり、接続 a#section1 を通じて対応するノードに関連付けられています。要素 button.cd-nav-trigger は、小さな画面デバイスでメニューをトリガーするボタンとして使用されます。 Section.cd-section は、ナビゲーション ノードのコンテンツに対応するために使用されます。

すごいです

CSS

HTML 構造をデプロイした後、必要な CSS スタイルをページに追加する必要があります。非常に小さな画面 (ビューの幅が 800 ピクセル未満) では、.cd-nav-trigger と

の位置がページの右下隅に固定されます。 .cd-nav-trigger をクリックまたはタッチすると、CSS3 を使用してナビゲーション メニューを展開するスムーズな遷移アニメーションを作成します。

<nav class="cd-vertical-nav">	<ul>		<li><a href="#section1" class="active"><span class="label">Intro</span></a></li>		<li><a href="#section2"><span class="label">Events</span></a></li>		<!-- additional navigation items here -->	</ul></nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="section1" class="cd-section">	<div class="content-wrapper">		<h1>垂直固定导航</h1>		<a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a>	</div></section> <section id="section2" class="cd-section">	<div class="content-wrapper">		<!-- section content here -->	</div></section>

そのため、大画面デバイスでは、まず Modernizr が現在使用しているデバイスがタッチ スクリーンをサポートしているかどうかを検出する必要があります。非タッチ スクリーンでは、マウスのスライド効果が発生します。右側の垂直ナビゲーション バーを固定の高さと幅に設定し、ページの右側に固定します。デフォルトでは、右側のナビゲーションにいくつかのドットが表示され、マウスをドットの上にスライドさせると、ナビゲーション バーが開き、ナビゲーション メニューを選択できます。

.cd-nav-trigger {  display: block;  position: fixed;  z-index: 2;  bottom: 30px;  right: 5%;} .cd-vertical-nav {  position: fixed;  z-index: 1;  right: 5%;  bottom: 30px;  transform: scale(0);  transform-origin: right bottom;  transition: transform 0.2s;}.cd-vertical-nav.open {  transform: scale(1);}

ドットとアイコンを作成するには、::after と ::before を使用して a 要素に疑似クラスを追加します。

@media only screen and (min-width: 800px) {  .cd-vertical-nav {    right: 0;    top: 0;    height: 100vh;    width: 90px;  }  .cd-vertical-nav::before {    /* this is the navigation background */    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.8);    transform: translateX(100%);    transition: transform 0.4s;  }  .no-touch .cd-vertical-nav:hover::before,   .touch .cd-vertical-nav::before {    transform: translateX(0);  }  .cd-vertical-nav .label {    display: block;    transform: translateX(100%);    transition: transform 0.4s;  }  .no-touch .cd-vertical-nav:hover .label,   .touch .cd-vertical-nav .label {    transform: translateX(0);  }}

もちろん、ここで効果は実現されていますが、ナビゲーション メニューをクリックしたときにページをスムーズにスクロールする効果を実現するには、jQuery を使用してスクロール アニメーションを実装する必要があります。このサンプルには、ダウンロードしたソース コード パッケージに含まれるすべての jQuery コードがパッケージ化されています。ダウンロード後に確認してください。この記事では再度説明しません。