ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3単一ページ縦固定navigation_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-06-24 11:29:48
オリジナル
1660 人が閲覧しました

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

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

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

HTML

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

すごいです

CSS

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

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート