はじめに: この記事では、非常にクールな 3 層に分かれた標準のスライド ドア ナビゲーション メニューを作成する方法を、アイデア、原則、手順、方法から順に説明します。この記事を読んだ後は、あなたもそう思うでしょう。独自の非常に美しい標準ナビゲーション メニューを作成することもできます。このメニューには冗長な構造がなく、動的なデータ出力に役立ちます。通常のプロジェクトでの使用に非常に適しています。このチュートリアルでは、スライド ドアの基本原理について説明します。まだこの道を模索している友人たちにとって役立つと思います。もちろん、間違いや問題があれば、ご相談ください。 このナビゲーション メニューが達成したい理想的な目標は次のとおりです。 美しく、個性的。 構造もセマンティクスも明確で、冗長なタグはありません。 パフォーマンス、構造、動作は 3 つのレベルで分離されており、一切の侵入がありません。 バックグラウンドプログラムのデータ出力に便利です。 メニューには 3 つの状態のエフェクト変更があります。 クリックしたメニュー項目を強調表示して記録できます。 調整可能なテキスト幅。テキストの内容の長さが変化すると、それに応じてボタンも変化する可能性があります。 すべての主要なブラウザと互換性があります。 この理想的なメニューをステップバイステップで実行してみましょう！ 構造 私の考えでは、理想的な標準メニューは次のような構造になっているはずです。 <div id="ナビ"> メニューの元の構造が利用可能になり、各ラベルに独自のセマンティクスが含まれていないことがわかります。ブラウザで見てみましょう。これは非常に単純なオリジナルのテキストです。レストランで食べ物を注文するときに使用するメニューのようなものです。おそらくそれよりも単純で、各メニューの前に何かがあります。 . 小さなドット！なんと、私たちの美しいメニューには程遠いのです！ スタイル さて、これは単なるスケルトンです。少し美化し、いくつかのシンプルなスタイルを追加し、少なくとも小さな点を削除して、水平に配置しましょう。 よし、スタイルを追加してみよう！ *{margin:0;padding:0;}/*1 つの外観に統一します。そうしないと、さまざまなブラウザーで見にくくなります*/ さて、見てください、私たちは小さな目標を達成しました。 デザインされたボタンのソースコードを使用すると、デザイン部分を保存できるのが便利です。ただし、スリーステート ボタンにするには、このボタンを変更する必要があります。 7 番目のゴールは見えましたか? アダプティブ ボタンを作成しているので、このボタンに何らかの処理を行う必要があります。 これら 3 つのボタンを、マウスを離したとき、クリックした後、マウスを上に動かしたときの 3 つの状態として示します。スライド ドア メニューを作成するには、左側の図のようにボタンを切り取る必要があります。左側に配置した場合、右の写真は右側に配置した場合です。テキストの長さに合わせてこのレイヤーの幅を少し伸ばす必要がありますが、この画像には非常に複雑な影の効果があり、気軽に伸ばすことはできません。そうしないと、同じ効果が得られません。真ん中で切り開いて、右の写真の左側を前方に伸ばしてみましょう。そこで、まず写真のように 6 つに切り分け、次にこれら 6 枚の写真を結合します。なぜそうなるのでしょうか? CSSスプライトの原理を見てみましょう！ここでは詳細には触れませんが、私の別の記事「ポーカー カードの作成 シリーズ 1---CSS スプライト画像の背景最適化テクノロジー」を参照してください。 上の画像では、1 番目と 2 番目の画像が通常のメニュー スタイル (デフォルト スタイル)、3 番目と 4 番目の画像がスクロール スタイル、5 番目と 6 番目の画像がクリックされたメニュー項目スタイルを形成しています。 必要なグラフィックが準備できました。次に、この画像をメニュー項目に追加しましょう。ボタンには 2 つの画像が表示される必要があります。 HTML タグには 1 つの画像しか含めることができないことは地球上の誰もが知っています (タグに 2 つの画像を含めることができることがわかったら、時間内に教えてください。夕食をごちそうします!)。おお！メニュー構造の各項目には正確に 2 つのタグがあり、1 つは li で、その中には A タグがあり、左右の画像を保持するために使用できます。 Li は左側の絵を保持するために使用され、A は右側の絵を保持するために使用されます。こんなに良いアイデアを思いつくことができるなんて、本当に自分を尊敬していますし、自分に満足しているんです…。 忙しくしないでください。このような画像をインストールした場合、どうすれば 3 つのマウス スクロール状態を実現できるでしょうか。私たちは皆、IE6 を除いて、他のブラウザが現在 li:hover 疑似クラスをサポートしていることを知っておく必要があります。ただし、すべての主要なブラウザと互換性を持たせるには (これが 8 番目の目標です。忘れないでください!)、この方法は機能しません。 IE6 は A タグにのみ hover 疑似クラスを適用でき、他のタグは無視されます。 IE6ではホバー擬似クラスはAタグにしか適用できないので、アダプティブスライディングドアメニューを作りたい場合は、構造を変更する必要があるようで、Aタグに別のタグを追加するしかないようです。メニューの構成はこんな感じになります。 (注: ここで構造が変わり始めます。私は常にこれが起こることを避けたいと思っていましたが、要件を満たすにはこのラベルを追加する必要があるようです。) <li><a href="#none" title="Bingjifeng"><span>Bingjifeng</span></a></li> テキストコンテンツを含むスパンコンテナを A タグに追加しました。ラベルが 2 つあり、2 つの写真を入れることができます。右の画像を A タグの背景に配置して右に配置し、左の画像を SPAN タグに配置して左に配置します。これにより、完全なボタンの形状が表示されます。 さて、準備はほぼ完了しました。メニューに新しい服を与える時間です。 適応幅メニューを作成したい場合は、メニューの幅値を設定できないため、固定幅の水平メニューを作成するときに通常行うように、幅を設定してから左にフローティングすることはできません。この場合、各メニュー項目の幅が異なる場合は、各項目の幅を個別に定義する必要があり、各メニュー項目に ID または CLASS を定義する必要があり、この方法は動的ループを助長しません。バックグラウンドプログラムの出力。 必要なのは、インライン要素のように各メニュー項目を行内に左から右に自動的に配置することです。次に、メニューをインラインで表示する必要があります。これは非常に便利な属性です。解析された配置です。基本的な要件を満たすことができます。ラベル要素は行内で左から右に自動的に配置され、各項目の幅は異なっていても構いません。 上記の属性を使用することで実際にニーズを満たせる場合、次のようなテキスト コンテンツは存在しません。 しかし…この属性には致命的な弱点もあり、FF3などの高機能なブラウザでしか認識できません。他のブラウザでは回り道しかできません。うーん！したがって、ブラウザの標準を統一することは非常に重要です。 HACKも私たちが対処しなければならない救済策であるようです。 幸いなことに、一部の専門家はすでに解決策を見つけています。まずはこの 2 つの記事をお読みください。 関連するチュートリアル: 私たちは皆、原理を理解しているので、上記の 2 つの記事で提供されたテクニックに基づいて適応的なメニューを作成することができます。 まずは、li要素の子ノードAタグに適用される、右の画像のスタイルを書いてみましょう。 li a{表示:インラインブロック; パディングトップ:10ピクセル; *パディングボトム:0; /button.gif) no-repeat right -36px; フォントサイズ:12px;色:#fff;} まず、display:inline-block を設定し、次にパディングを使用してマージンを拡張し、画像を埋めるための一定量のスペースを確保します。ここでの画像パスは独自のパスに置き換えられることに注意してください。次に、下線の削除、フォントの色、フォント サイズなど、他のスタイルを設定します。画像を右寄せに設定します。 li スパン{表示:インラインブロック; パディングトップ:10px; パディングトップ:13px; ; 背景:url(images/button.gif) 左上を繰り返しません;} ボタンの左側の画像を SPAN 要素に配置し、その画像を左に揃え、幅と高さを拡張するようにパディングを設定します。 li a,li a スパン{display:inline;cursorointer;} 次に、それらをインライン モードに戻し、IE の haslayout 機能をトリガーします。 li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;} 次にマウスクリック後のエフェクトです。 li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;} OK、これで完了したようです。別のブラウザで見てみると、満足のいく結果が得られるようです。 これで、純粋な CSS バージョンのスライディング ドア メニューが基本的に準備完了です。
フォーラムなどで友人がメニューを作っているのをよく見かけますが、正直、構造的に冗長か、形はあっても魂が無いか、魂はあっても見た目が無いかのどちらかです。そして私たちが今作りたいのは、最高のメニューです。初心者でもベテランでも、このチュートリアルで役立つものが見つかるはずです。
理想的なメニュー構成は、無駄がなく、すっきりしていて、分離されているはずですが、さまざまな理由で意味のないものが増えてしまい、最終的には「きれい」から遠ざかってしまいます。 。したがって、メニューを作成する前に、製造プロセス全体を通じて心に留めておかなければならない、いかなる外力によっても妨げられない特定の原則があります。
<ul id="メニュー">
<li><a href="#none" title="ブログ ガーデン">ブログ ガーデン</a></li>
<li><a href="#none" title="コミュニティ">コミュニティ</a></li>
<li><a href="#none" title="ホーム">ホーム</a></li>
<li><a href="#none" title="新しいエッセイ">新しいエッセイ</a></li>
<li><a href="#none" title="連絡先">連絡先</a></li>
<li><a href="#none" title="管理">管理</a></li>
<li><a href="#none" title="購読">購読</a></li>
<li><a href="#none" title="冰鶏峰">冰鶏峰</a></li>
</ul>
</div>
ul{list-style:none}/*ドットを削除*/
li{float:left;margin-left:10px;}/*水平に配置し、間隔を空けすぎないでください。 */
骨組みが整ったので、次のステップは各メニュー項目に美しい服を着せることです。
最初の要件を満たすには、まず美しいボタンを用意し、自分で描く必要があります。ああ、私はアーティストではないので、それは難しいです。ただし、インターネットは非常に広大なので、誰かがすでに何か良いことを見つけているかもしれません。ありがとうございます。 (涙が出てきます...) ボタンのソースコード: http://bbs.blueidea.com/thread-2860891-1-1.html
影画像を特別に抽出し、小さな背景画像を作成しました。
幸いなことに、追加のタグが追加されていますが、完全にセマンティックレスではありません。
この属性はプロジェクトの基本的なニーズを満たすことができますが、幅と高さの値を設定できないという非常に致命的な弱点があります。信じられない場合は、試してみてください。これは、テキストのデフォルトの高さと幅としてのみ表示されます。この幅と高さの値を超えると、自動的に非表示になります。このようにして、ここに背景画像があります。この画像の効果を示すには、幅と高さを指定する必要があります。これは、効果を達成できないことを意味し、イライラします。幸いなことに、display:inline-block という別の属性があり、そのパフォーマンスが必要です。
「display:inline-block の 2 つの適用例」 (Qin Ge)
「シミュレーション互換性のためのインラインブロック属性」 (Yi Fei)
上記のコードには、IE や FF などのブラウザーのさまざまな影響を解決するために使用される HACK アプリケーション *padding-bottom: 0; および *padding-top: 0; も含まれています。私の言うことが信じられない場合は、それを削除して、それがどのような影響を与えるかを確認してください。IE の高さの拡張には問題があります。
さて、今度はマウスを移動したときのエフェクトを書きます。
li a:ホバースパン{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}
li a:active scan{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}