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