サブメニューやアイコンのあるグローバルメニューを 2行で表示

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

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

カスタマイズ箇所グローバルメニュー
カスタマイズ方法CSS
テンプレート変更なし
コピペの可否90% 可能

グローバルメニューの各メニューを、 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行目にアイコンが表示されます。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする