グローバルナビゲーション

See the Pen 【ボタン】ナビゲーション 1 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. ナビゲーションボタンの配置に display: flex; を使用しています。
2. リンクボタン内の文字の配置にも display: flex; を使用して中央表示にしています。
3. マウスホバー時の動作として、各ボタンの下にアニメーションをしてラインが表示されます。
4. ホバー時のボタン以外の表示を、否定疑似クラスである :not() を使用し制御しています。

See the Pen 【ボタン】ドロップダウンメニュー by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 各メニュー項目にホバーすると、子階層用のメニューが表示されます。
2. 親要素であるmenu__parentsを設定した<li>要素内に、子階層表示用の<ul>要素を配置しています。

See the Pen 【ボタン】ナビゲーション5 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. ナビゲーションのそれぞれの項目の<li>要素に、style属性で変数の設定を行っています。
2. <li>要素につけられた変数の値によって各項目に角度をつけています。
3. ホバー時、ナビゲーションの各項目が少し動きます。

See the Pen 【ナビゲーション】6 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 画面のスライド制御に、ナビゲーション側は position: fixed; コンテンツ側には position; relative; を使用し制御しています。

See the Pen 【ナビゲーション】7 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 上部への固定には、position: sticky; を使用しています。
2. ナビゲーションの外枠部分と、<a> 要素には border-radius を使用して角を丸くしています。