CSSで水平なメニュー – WordPress*リファレンス

水平なMenusはカテゴリかページのメニューを作成する素晴らしい方法です、あなたのウェブサイトの中で興味がある特定の領域を強調して。多くのウェブデザイナーが水平なメニューをヘッダーの下に置きます。そこでは、彼らが目を描きます。

⇒Horizontal Menus are an excellent way to create a menu of categories or Pages, highlighting specific areas of interest within your website. Many web designers place a horizontal menu under the header, where they draw the eye.

水平なメニューはHTML List機能で作成されます。はい、垂直典型的なリストのようにの代わりに水平ですが、それでも、それらはリストです。 CSSプレゼンテーションスタイルで、リストにそれぞれのリスト項目のための別々の線の代わりに1つの線で動くように私たちを設定します。

⇒Horizontal menus are created with the HTML List feature. Yes, while they are horizontal instead of vertical, like typical lists, they are still a list. CSS presentation styles allow us to set the list to run on one line instead of a separate line for each list item.

水平なメニューが単に水平な線のリストであるので、リストから過程を始めましょう。

⇒Since horizontal menus are simply lists in a horizontal line, let’s start the process with a list.

水平なメニューを作成します。

Creating a Horizontal Menu

以下に、私たちの水平なメニューのための単純並びがあります。私たちは、多く過ぎるのがスクリーンの向こう側に広い状態で伸びて、いくつかのレイアウト問題を引き起こすときあなたがリストを小さく保つのを勧めます。私たちはnavmenuと呼ばれる分割にリストを同封しました。

⇒Below is the simple list for our horizontal menu. We recommend you keep your list small as too many will stretch wide across the screen and may cause some layout problems. We’ve enclosed the list in a division called navmenu.

お分かりのように、私たちのリストの中では、私たちは「ホームページ」のためのPHPタグといくつかのカテゴリを入れました、WordPressへのリンクと同様に、それらの役立った人々。リストは最も簡単なフォームでこれに似ているでしょう(Codexによって流行に合わせられているように):

⇒As you can see, within our list we’ve included a PHP tag for the “home page” and several categories, as well as a link to WordPress, those helpful folks. The list would look like this, in its simplest form (as styled by the Codex):

HOME
RECIPES
TRAVEL
WORDPRESS

また、あなたは、あなたのカテゴリを記載するのにwp_list_cats()テンプレートタグを使用することができます。あなたがただカテゴリ1、3、4、および5を記載して欲しく、残りを除いて欲しいなら、あなたのリストはこれに似るかもしれません:

⇒You can also use the wp_list_cats() template tag to list your categories. If you just want categories 1, 3, 4, and 5 listed and the rest excluded, your list might look like this:

WORDPRESS

ヘッダーのすぐ下にあなたの新しいリストを置く場所があるかもしれません。 WordPress v1.5では、あなたが使用しているWordPress Themeフォルダーでheader.phpファイルを開いてください。ヘッダーDIVの後にファイルの下部でコードを貼ってください、そして、次に、ファイルを保存してください。

⇒The place to put your new list might be just under the header. In WordPress v1.5, open the header.php file in the WordPress Theme folder you are using. Paste the code at the bottom of the file after the header DIV and then save the file.

WordPress v1.2では、index.phpファイルを開いてください、そして、ヘッダー部分と場所の端のときにそこでリストコードを見てください。

⇒In WordPress v1.2, open the index.php file and look for the end of the header section and place your list code there.

CSSを適用します

Applying the CSS

デフォルトで、リストは垂直に動いて、それ自身のものに関する各個条は線です。また、それは各線の前に弾丸として知られているイメージを含んでいます。あなたのスタイルシートでは、私たちは、navmenuと第一歩の参照が弾丸を移して、全体のリストのためにゼロに私たちのマージンと詰め物を設定することであると言い足す必要があります

⇒By default, a list runs vertically, each item on its own line. It also includes an image, known as a bullet, before each line. In your stylesheet, we need to add a reference to the navmenu and the first step is to remove the bullet and set our margins and padding to zero for the whole list.

[css]#navmenu ul {
margin: 0; padding: 0;
list-style-type: none; list-style-image: none;
}
[/css]

あなたのスタイルシートを救って、アップロードして、次に、ウェブページブラウザでテストページをリフレッシュするなら、あなたは、あなたのリストには弾丸がなくてインデントが全く現在ないのがわかるでしょう、すべてがまさしく働いているなら。

⇒If you save and upload your stylesheet, then refresh the test page in your web page browser, you would see that your list now has no bullets and no indents, if everything is working right.

今、私たちは、水平な線にこのリストを設定するテクニックを加える必要があります。私たちは、リスト項目自体のスタイル参照を加える必要があります。

⇒Now, we need to add the technique that will set this list into a horizontal line. We need to add a style reference to the list item itself.

[css] #navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline;
}
[/css]

これらがリンクであるので、私たちはリンクの外観をきれいにするには瞬間かからなければなりません。あなたがこのリストを流行に合わせるためにできる多くのことがありますが、当分マウスがそれを譲るとき、一緒に混雑していなくて、デフォルトリンクアンダーラインを取り除いて、リンク変化を持っていて、リンクのリストへの何らかのスペースが着色すると言い足しましょう。

⇒Because these are links, we have to take a moment to clean up the look of the links. There are many things you can do to style this list, but for now, let’s add some space to the list of links so they aren’t crowded together and remove the default link underline and have the link change colors when the mouse moves over it.

[css]#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }
[/css]

間違いなく、私たちは抵抗することができません。もう1ステップでこれをさらに取って、何らかの本当のジャズを私たちの新しい水平なメニューリストに与えましょう。外観を変えるために何をしているかを言うことができるかどうかを見てください。

⇒Okay, we can’t resist. Let’s take this another step further and give our new horizontal menu list some real jazz. See if you can tell what is being done to change the look.

[css]#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none; margin: 4px;
padding: 5px 20px 5px 20px; color: blue;
background: pink;}
#navmenu ul li a:hover {color: purple;
background: yellow; }
[/css]

私たちがこの全てを正確にしたならば、あなたのリストはこのように見えるはずです:

⇒If we did this all correctly, your list should look like this:

メニュー表示画像
* HOME
* RECIPES
* TRAVEL
* WORDPRESS

水平なメニューに関する詳しい情報

More Information on Horizontal Menus

リストを流行に合わせる多くの異なった方法があります。想像力を使ってください、そして、あなたが欲しい色、または何でも交替して、あなた自身のデザインを思いついてください。ここに、あなたが開始するのを助けて、Horizontalに関してさらに学ぶいくつかのリソースと他の特殊効果メニューがあります:

⇒There are many different ways to style lists. Use your imagination and come up with your own design, alternating colors, or whatever you want. Here are a few resources that will help you get started and learn more about Horizontal and other special effects menus: