このガイドは、サイトの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メニュー