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

cocohp

6年前

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

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

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

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

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

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

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

CSSの記述

.fixed {
    position: fixed;/*----------------固定*/
    top: 0;
    z-index: 10000;/*重なり順を指定できる。値が大きい方が、前面配置になります。*/
}

.fixed {

position: fixed;/*----------------固定*/

top: 0;

z-index: 10000;/*重なり順を指定できる。値が大きい方が、前面配置になります。*/

}

.fixed {
 position: sticky;/*----------------移動して固定*/
 top: 0;
}

.fixed {

position: sticky;/*----------------移動して固定*/

top: 0;

}

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

ナビゲーション部

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

	<nav id="fixed">
  <ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
  </ul>
</nav

<ul>

</ul>

</nav