初心者向けのCSSメニュー

このガイドは、サイトのCSSメニューを作成するのに役立ちます。普通ではありません。ユーザーの注意を引くため、ためらわないでください。 それでは始めましょう...

メニューの背景

はじめに、バックグラウンドを作成します。私は確かにPhotoShopのマスターではありませんが、数分で得たものは次のとおりです。

グラフィックボタン

メニューのリンクとして使用する画像を作成します。 これを行うには、PhotoShopを使用します。

• 144x58pxのサイズで新しいファイルを作成します。 （メニューの最初のアイテムのリンクサイズ）
• このメニュー項目にグラフィックコンテンツを入力します（私にとっては、これは単なる面白いフォントで作られた碑文です）。
  
• 次に、キャンバスのサイズを2倍にします
  
• そして、メニュー項目の外観を描画して、ホバーイベントを実装します
  
  この設計はどのように機能しますか？ はい、非常に簡単です-リンクのサイズを明示的に144x58pxに指定しますが、マウスオーバーイベントは背景画像を上に移動します。
  
• 任意のサイズとテキストで新しいファイルを作成します-これがリンクのヒントになります
• 操作の結果、この一連の画像を取得する必要があるため、前のすべてのポイントを繰り返してすべてのメニュー項目を作成します。
  

HTMLコード

デザイナーを自分たちで作り上げたので、コーディングを始めましょう-順不同リストを作成します-<ul>：

• <ul>要素をid = "menu"に設定します
• 各リンク<a>には一意のクラス名が割り当てられます
• <a>タグ内に、空の<span>タグをドロップします（リンクヒントを実装する必要があります）
  

<ul id = "menu">
<li> <ahref="#"class=決定ホーム>>ホーム<span> </ span> </a> </ li>
<li> <a href="#" class= decisionabout>> <span> </ span>について</a> </ li>
<li> <a href="#" class= wonrss>> RSS <span> </ span> </a> </ li>
</ ul>

CSSコード

#menu
最初に、メニューからパディングとマージンを削除し、list-styleをnoneに設定し、位置を相対として設定します。 メニューの高さと幅を指定します（寸法menu-bg.jpgを参照）。 背景画像を追加します。

#menu {
リストスタイル：なし;
パディング：0;
マージン：0;
幅：774px;
高さ：210px;
背景：url（images / menu-bg.jpg）no-repeat;
位置：相対;
}

＃メニュースパン

スパン要素の場合、表示はnoneに設定されます（デフォルトでは表示されません）。 また、位置を絶対位置に設定します。

#menu span {
ディスプレイ：なし;
位置：絶対;
}

#menu a

リンクの場合、テキストを非表示にする必要があります。そのため、text-indentパラメーターに負の値（-900％）を割り当てると、テキストが非表示になります。

#menu a {
ディスプレイ：ブロック;
テキストインデント：-900％;
位置：絶対;
アウトライン：なし;
}

#menu a：ホバー

次に、マウスオーバーイベントによってリンク上の画像をシフトします。そのために、次のコードをCSSに追加します。

#menu a：ホバー{
バックグラウンド位置：左下。
}

#menu a：ホバースパン

また、マウスオーバーイベントでは、ツールチップを表示する必要があります

#menu a：ホバースパン{
ディスプレイ：ブロック;
}

#menu .home

次に、メニュー項目を正しく配置する必要があります。 最初に、要素のサイズと背景画像を指定し、次に配置を行います。メニューの外観から道徳的な満足を感じるまで、パラメータを左と上に変更します。

#menu .home {
幅：144px;
高さ：58px;
背景：url（images / home.gif）no-repeat;
左：96px;
上：96px;
}

#menu .home span

次に、ツールチップに対して同様の操作を行いましょう

#menu .home span {
幅：86px;
高さ：14px;
背景：url（images / home-over.gif）no-repeat;
左：28px;
上：-20px;
}

#menu .about

.home要素に対して行ったすべてをコピーし、名前を.aboutに変更します。 サイズと位置を調整し、背景も置き換えます。

#menu .about {
幅：131px;
高さ：51px;
背景：url（images / about.gif）no-repeat;
左：338px;
top：97px;
}
#menu .about span {
幅：40px;
高さ：12px;
背景：url（images / about-over.gif）no-repeat;
左：44px;
上：54px;
}

#menu .rss

.rssについて繰り返します

#menu .rss {
幅：112px;
高さ：47px;
背景：url（images / rss.gif）no-repeat;
左：588px;
上：94px;
}
#menu .rss span {
幅：92px;
高さ：20px;
背景：url（images / rss-over.gif）no-repeat;
左：26px;
上：-20px;
}

オールインワン

#menu {
リストスタイル：なし;
パディング：0;
マージン：0;
幅：774px;
高さ：210px;
背景：url（images / menu-bg.jpg）no-repeat;
位置：相対;
}
#menu span {
ディスプレイ：なし;
位置：絶対;
}
#menu a {
ディスプレイ：ブロック;
テキストインデント：-900％;
位置：絶対;
アウトライン：なし;
}
#menu a：ホバー{
バックグラウンド位置：左下。
}
#menu a：ホバースパン{
ディスプレイ：ブロック;
}

#menu .home {
幅：144px;
高さ：58px;
背景：url（images / home.gif）no-repeat;
左：96px;
上：73px;
}
#menu .home span {
幅：86px;
高さ：14px;
背景：url（images / home-over.gif）no-repeat;
左：28px;
上：-20px;
}

#menu .about {
幅：131px;
高さ：51px;
背景：url（images / about.gif）no-repeat;
左：338px;
top：97px;
}
#menu .about span {
幅：40px;
高さ：12px;
背景：url（images / about-over.gif）no-repeat;
左：44px;
上：54px;
}

#menu .rss {
幅：112px;
高さ：47px;
背景：url（images / rss.gif）no-repeat;
左：588px;
上：94px;
}
#menu .rss span {
幅：92px;
高さ：20px;
背景：url（images / rss-over.gif）no-repeat;
左：26ピクセル;
上：-20px;
}

これですべてです 。 ここでメニューをテストし、 こちらからサンプルをダウンロードできます 。

無料翻訳： http : //www.webdesignerwall.com/tutorials/advanced-css-menu/

Krosspost： Web 2.0スタイルのCSSメニュー