今回は_s(underscores)のナビゲーション部分をCSSで装飾していくサンプルをご紹介します。こちらを参考に自分の好きなように装飾してみるのも良いかと思います。

ナビゲーション部分の構造

ナビゲーション部分の構造は簡単ですが以下のようになります。

ベース部分の装飾

まずはベースとなる表示部分をコーディングしていきます。

.main-navigation {
  position: relative;
  float: left;
  width: 100%;
  display: block;
  clear: both;
  text-transform: uppercase;
  background: #313131;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.main-navigation li {
  float: left;
  position: relative;
}
.main-navigation a {
  display: block;
  padding: 1.3em 1em;
  font-size: 14px;
  text-decoration: none;
  line-height: 1.3em;
  color: white;
}

クラス名など解りにくい場合は、上の図を参照しながら読み進めてみてくださいね。

まずは.main-navigationをはじめulやli要素ならびにaタグまで装飾してあります。

子要素、孫要素について

.main-navigation > ul > liの中に各メニューが配置されるわけですが、子要素がある場合.main-navigation > ul > liの中にさらにul > liという形で子要素メニューが配置されます。また、孫要素も同じ繰り返しでメニュー項目が配置されます。

それらの部分も考慮し、さらにマウスオンした場合の:hoverも設定しておきます。

.main-navigation ul ul {
  float: left;
  position: absolute;
  background: #4d4d4d;
  left: -999em;
  z-index: 99999;
}
.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}
.main-navigation ul ul a {
  width: 200px;
}
.main-navigation li:hover > a {
  color: #fff;
  background: #4d4d4d;
}
.main-navigation ul ul a:hover {
  background: #313131;
}
.main-navigation ul li:hover > ul {
  left: auto;
}
.main-navigation ul ul li:hover > ul {
  left: 100%;
}

現在地（表示中のページ）をわかりやすく表示

ナビゲーションが常に同じカラーで何も変化がないとユーザーが迷ってしまう場合があります。マウスオーバー時に色を変えることは、ユーザーに対して自分のマウス位置を教えてあげる効果があります。同じようにユーザーが一目で現在見ているページがナビゲーションの中ではどこに位置するのかを視覚的にわかりやすくしてあげる必要があります。

現在地（現在表示中のページ）や選択中のメニュー（子要素メニューを選択時など）にはそれぞれ.current_page_itemや.current-menu-itemというクラスが割り振られます。それらを使ってユーザーにわかりやすく表示してあげましょう。

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover {
  background: white;
  color: #313131;
  color: #303030;
}
.main-navigation .current_page_ancestor {
  background: #4d4d4d;
  background: #4d4d4d;
}
.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
  color: #fff;
  color: white;
  background: #313131;
  background: #303030;
}

実際の表示を確認

こちらの画像では「このサイトについて」というメニューの中の「コメントのついたページ」を表示しています。

こちらを見ていただくとわかるように、子要素メニューを表示していても親メニュー部分が視覚的に選択されていることが一目瞭然ですね。このようにユーザーにフレンドリーな設計を常に心がけたいですね。

まとめ

簡単にコードとともに_s(underscores)のナビゲーション部分のCSSによるカスタマイズ方法をご紹介しました。この方法しかないわけではありませんし、こちらのソースを参考に構造を理解していただければ、いろいろな形で表現の幅は広がると思います。

参考になれば幸いです。