メニューにサブメニューやアイコンをつけて 2 行で表示する方法

CSSで2行のグローバルメニュー

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

グローバルメニューの各メニューを、 2 行で表示しているサイトがあります。

コーポレートサイトに多いのが、 1 行目に日本語を 2 行目に英語を併記しているメニュー。

また、アイコンを 1 行目に、メニュー名を 2 行目にしているメニューもあります。

サイト訪問者に優しい分かりやすいメニューです。

ただ、 <br> で 2 行にしているサイトがあるのが気になるところ。

<br> は見た目を整えるために、使うものではありません。見た目は CSS で装飾することが原則。

Simplicity のグローバルメニューを 2 行で表示する CSS の指定をご紹介します。

なるべくコピペでできるように、「プラグインなしでメニューに Font Awesome アイコンを表示」でご紹介した :nth-child を主に使います。

:after 疑似要素で英語のサブメニューを表示する方法

コーポレートサイトに多く見られるのが、日本語のメニュー名の下に英語のサブメニューを表示しているグローバルメニュー。

これは CSS の :after 疑似要素で簡単に表示できます。

Simplicity であれば、下記のように CSS で指定します。

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
}

.menu-item > a:after {
  display: block;
}

.menu > .menu-item:nth-child(1) > a:after {
  content: 'Cooking';
}

1 つ目のメニュー「料理」の下に「 Cooking 」が表示されました。

1つ目のメニューの下に英語のサブメニューを表示した例

.menu-item > a:after {
  display: block;
}

上記の display: block; を指定することが、 2 行で表示するポイント。

2 つ目以降のメニューにも追加するには、 :nth-child の数字を変え content を指定します。

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
}

.menu-item > a:after {
  display: block;
}

.menu > .menu-item:nth-child(1) > a:after {
  content: 'Cooking';
}

.menu > .menu-item:nth-child(2) > a:after {
  content: 'Game';
}

.menu > .menu-item:nth-child(3) > a:after {
  content: 'Movie';
}

.menu > .menu-item:nth-child(4) > a:after {
  content: 'Book';
}

.menu > .menu-item:nth-child(5) > a:after {
  content: 'Love';
}

これですべてのメニューが、英語のサブメニュー付きで 2 行で表示されます。

すべてのメニューに英語のサブメニューを表示した例

:nth-child ではなく、各メニューの id や class での指定も可能です。

各メニューの id や class は、ブラウザのデベロッパーツールで確認できます。

子メニューにもサブメニューを表示する場合には、 id や class での指定がおすすめ。

class が menu-item-1 のメニューに指定する例は下記の通りです。

.menu-item-1 > a:after {
  content: 'Beef';
}

アイコンを :before 疑似要素で 1 行目に表示する

アイコンを 1 行目、メニュー名を 2 行目に表示するには、アイコンを :before 疑似要素で指定します。

下記の CSS を指定すると…。

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
}

.menu-item > a:before {
  display: block;
  font: 24px/1 FontAwesome;
  margin-bottom: 4px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f0f5';
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f11b';
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f008';
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f02d';
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f004';
}

1 行目にアイコンが表示されました。

1行目にアイコンを2行目にメニュー名を表示した例

2 行で表示するのは PC でのみ、モバイルでは 1 行で表示する場合は、下記の CSS を指定します。

.menu-item>a:before {
  font: 24px/1 FontAwesome;
}

@media screen and (min-width: 1110px) {
  .menu > .menu-item > a {
    text-align: center;
  }
  .menu-item > a:before {
    display: block;
    margin-bottom: 4px;
  }
}

@media screen and (max-width: 1110px) {
  .menu-item > a:before {
    display: inline-block;
    margin-right: 4px;
    position: relative;
    text-align: center;
    top: 2px;
    width: 32px;
  }
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f0f5';
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f11b';
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f008';
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f02d';
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f004';
}

するとモバイルでは、アイコンがメニュー名の左に。

モバイルではメニュー名の左にアイコンを表示した例

ちなみに、:before:after に変えると、 1 行目にメニュー名、 2 行目にアイコンが表示されます。