■ Webデザインを学ぶ【初級/後編】,  ◎ 様々な演出効果

グローバルメニューを移動・固定

メニューを移動し、固定する

ヘッダーの直下にあるナビゲーションが、スクロールすると、ページトップの位置に固定されるように実装します。また、固定されたメニューは、重なり順の一番手前へ設定することで、常にメニューバーが手前へ固定される配置が実現できます。

▶ 【メニュー固定/サンプルを見る】

▶️神戸北野L’AVENUE(メニュー固定を採用)

固定するためのセレクターを記述する

positionをfixedに指定することで、位置が固定されます。また、z-indexプロパティは、ボックスの重なり順序を指定する際に使用します。 値が大きい要素ほど前面にきます。

▶ 【メニュー固定/サンプルを見る】

CSSの記述


stickyを設定された要素は、指定した位置まで移動し、固定し、他に要素の上に重なります。


ナビゲーション部

上記の記述に合わせ、ナビゲーション部にidとclassを付与します。