ナビゲーションメニューを横メニューにする方法についての考察

WordPress.com のこれまでのデフォルトテーマを使って、ナビゲーションメニューを横メニューにする方法について、試行錯誤してみましたが、

  • テーマ「Twenty Ten」のナビゲーションメニューを横メニューにするための CSS(非公開)
  • テーマ「Twenty Eleven」のナビゲーションメニューを横メニューにするための CSS(非公開)
  • テーマ「Twenty Twelve」のナビゲーションメニューを横メニューにするための CSS(非公開)
  • テーマ「Twenty Thirteen」のナビゲーションメニューを横メニューにするための CSS(非公開)
  • テーマ「Twenty Fourteen」のナビゲーションメニューを横メニューにするための CSS(非公開)

だいたい、同じような考え方ですべてできたので、その考え方についての覚え書きです。上記5つの中ではテーマ「Twenty Eleven」が最もシンプルに横メニューにすることができたので、ここでは、テーマ「Twenty Eleven」を使って覚え書きしたいと思います。

Twenty Eleven のカスタマイズ — WordPress
rect3015
Twenty Eleven のカスタマイズ — WordPress-4
 

メニューの要素の幅の指定を解除する

まず、メニューのひとつひとつにかかっている幅の指定を外します。

#access ul ul a {
width: auto;
}
Twenty Eleven のカスタマイズ — WordPress-1

テーマ「Twenty Eleven」の場合は、定義がひとつだけでしたが、テーマの種類によっては、複数あったり、最小値(min-width)の指定もあったりするので、その場合にはそれらの命令も解除します。

各階層のナビゲーションメニューの幅を 100% に指定する

横メニューの各階層の幅を 100% に指定します。

#access li .sub-menu {
background-color: #f9f9f9;
width: 100%;
}
Twenty Eleven のカスタマイズ — WordPress-2

ただし、この段階では、「何に対して 100% か」の「何」の指定がうまくいっていないので、上図のような感じになることが多いです。

横メニューの幅の基準となる要素を指定する

横メニューの要素に「position: relateve」か「position: absolute」が定義され、その間の要素に配置指定がない状態にします。配置指定の解除は「position: static」で行います。

Twenty Eleven のカスタマイズ — WordPress-6
 
#access li {
position: static;
}

#access {
position: relative;
}
Twenty Eleven のカスタマイズ — WordPress-3
 

調整中は、例えば、以下のような感じになります。

Twenty Eleven のカスタマイズ — WordPress-5
 

横メニューを縦方向に配列させる

top と left を再定義するなどして、横メニューが縦方向にきっちりと並ぶようにします。

.sub-menu ul {
left: 0 !important;
top: 100% !important;
}
Twenty Eleven のカスタマイズ — WordPress-4
 

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。