マウスを乗せたときに背景がぼんやり白くなるグローバルメニューの作り方

グローバルメニューを作りましょう

HP制作において、グローバルメニューは欠かせません。「グローバルナビゲーション」とも呼ばれます。CSSを少し追加するだけで、スタイリッシュに作れます。早速見ていきましょう。デモはこちらです。↓

See the Pen YzyRQqJ by take (@take-note) on CodePen.

詳細を見ていきます。HTMLコードはごくシンプルです。↓

<nav>
  <ul>
    <li>MENU</li>
    <li>MENU</li>
    <li>MENU</li>
  </ul>  
</nav>

ＣＳＳコードです。グローバルメニュー全体にbox-shadowで影を付けています。背景も少しグラデーションをかけています。↓

 nav{
  background:linear-gradient(#92959b,#575b68);
  box-shadow: 0 2px 3px rgba(51,51,51,0.5);
  height:auto;
  margin:10px 0px;
  }

display:flex;にし、Justify-contentをspace-aroundで指定すると、各アイテムが均等に配置されます。

nav ul {
  display:flex;
  justify-content: space-around;
  padding: 0;
  color: rgb(247, 247, 247);
  font-weight:normal;
  font-size:125%;
  }

マウスが乗った時の指定は、セレクタに : hoverを追加するだけですね。

box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.603) inset; で背景に影を付け、ぼんやり白くなるようにしています。

transitionプロパティは、要素の2つの状態間の変化を定義することができます。

transition: ease-in-out 1s; で、1秒かけて始めと終わりの変化がゆっくりという指定になります。↓

nav li:hover {
  background-color:#999999;
  box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.603) inset; 
  transition: ease-in-out 1s;
  color: rgb(247, 247, 247);
  cursor:pointer;
}

こうすることで、マウスが乗った時に背景がじわじわと変化していくように見えます。