しかし、非常に多くの場合、デザイナーは別の非常に鈍いレイアウトを作成しようとして、3Dボタン、または丸みを帯びたエッジと多数のグラデーションを持つボタン、または他の恐ろしいものを作成します:)
このトピックでは、各メニュー項目のサイズが固定されていない、つまり「ドラッグ」できることを考慮して、そのようなメニューの実装方法に焦点を当てます。
素晴らしいボタンがあります：
タスクは、このボタンをメニュー項目にして、水平および垂直の両方に伸縮できるようにすることです。 通常、これは4つの角+ 4つのexストリップ（下、上、2つの面、すべて繰り返しプロパティを使用して繰り返される）を切り出すことによって行われます-それぞれ、少なくとも8（！）要素、それぞれ8枚の写真が必要です。
私は違うやり方をすることを提案します。 これはメニュー項目であり、その中にテキストの段落を含めることはできないという事実を考慮します（つまり、サイズが制限されます）。
まず、通常のメニューの実装があります。
たとえば、次のように、ボタンの最大サイズを考慮して、ボタンのサイズを大きくします。
HTMLにいくつかのスパンを追加します。
- 会社について
- 人生について
- 死後の人生について
- 死後の死について
- 幻想は終わった
そして、ここにCSSがあります：
ul
{
margin: 0;
padding: 0;
}
ul li
{
margin: 0;
padding: 4px 0;
list-style-type: none;
}
ul li a
{
display: block;
padding: 0 0 0 20px;
background: url(img/button.gif) no-repeat 0 100%;
}
ul li a span
{
display: block;
padding: 0 0 25px 0;
background: url(img/button.gif) no-repeat 100% 100%;
}
ul li a span span
{
padding: 0 20px 0 0;
background-position: 100% 0;
}
ul li a span span span
{
padding: 20px 0 0 20px;
margin-left: -20px;
background-position: 0 0;
}
cssに表示されるすべてのパディングとマージンは、ボタンの4つの側面すべてからパディングを設定するために使用されます。 理解するのが面倒-私はそのような写真と次のコードでデモンストレーションします：
ul
{
margin: 0;
padding: 0;
}
ul li
{
margin: 0;
padding: 4px 0;
list-style-type: none;
}
ul li a
{
display: block;
padding: 0 0 0 20px;/* a */
background: url(img/button.gif) no-repeat 0 100%;
}
ul li a span
{
display: block;
padding: 0 0 25px 0;/* d */
background: url(img/button.gif) no-repeat 100% 100%;
}
ul li a span span
{
padding: 0 20px 0 0;/* c */
background-position: 100% 0;
}
ul li a span span span
{
padding: 20px 0 0 20px;/* b 0 0 a */
margin-left: -20px;/* a */
background-position: 0 0;
}
したがって、幅と高さの両方で項目を拡張できるメニューがあります。つまり、複数行のメニュー項目は問題ではありません。
その結果、有効なコード、1（！）写真、ブラウザ間の互換性、完了したタスク。
テスト：
IE6-7、Firefox 2、Windows上のOpera 9.5
MacのSafari 4
PS「メガフレッシュ」なアイデアのふりをするのではなく、そのような問題の解決に苦しんでいる人々と共有することにしました。