もちろん、それだけでなく、 同様のメニューを作成できるので、興奮しました。 ただし、通常のユーザー、特に最新ではないユーザーは違いに気付かないでしょう。 含む、私はすぐにこのメニューのチップを理解していませんでした。 私は何かを作成するとき、あらゆる種類の細かい詳細やニュアンスが好きですが、これらの細かい詳細やニュアンスからプロジェクトの一般的な印象が構築されるためです。
そのため、CSS3で同様のメニューを実装することを提案します。
読者の皆さん、すぐに違いを確認できるように、 CSS3のメニューの最終デモとJSのSnickersmixのメニューのデモをお届けします
次に、作成プロセスについて簡単に説明します
HTML
<nav id="a"> <ul><li><a href="#"></a></li><li><a href="#"> </a></li><li class="active"><a href="#"> </a></li><li><a href="#"></a></li><li class="slide"></li></ul> </nav>
1）メニューにはdisplay inline-blockがあるため、タグ間にスペースや改行を入れないでください
2） スライドクラスの最後のメニュー項目は移動ダイです。 before / after疑似要素を介してそれを実行する方法を探していましたが、見つかりませんでした。
オプション1
このオプションは十分に迅速に作成しました。ここでは、要素の幅を固定しています。
このメニューおよび他のメニューはCSS3トランジショントランジションアニメーションを使用します
transition: all 0.5s ease-in-out;
このアニメーションをリスト項目（li、a）の（すべての）アクション/変更に割り当てました。
次に、 スライドクラスを使用して要素を移動する必要がありました。 これを行うために、この要素をposition：absoluteに設定し、親（ul）に位置：relativeを設定することを忘れずに、 スライドがページではなくメニューに対して配置されるようにします。 したがって、 左または右を使用してメニュー内を移動できます。
しかし、それを動かす方法は？ 最初のオプションでは、ピクセル単位で各要素の絶対計算を行いました。 寸法と座標を取得しました。 そして、一般化された関連要素のセレクターの助けを借りて、彼はホバーでスライド移動しました。
.active:nth-child(1) ~ li.slide, /* */ li:hover:nth-child(1) ~ li.slide { /* */ left: 0; width: 147px; } .active:nth-child(2) ~ li.slide, li:hover:nth-child(2) ~ li.slide { left: 147px; width: 241px; } .active:nth-child(3) ~ li.slide, li:hover:nth-child(3) ~ li.slide { left: 388px; width: 257px; } .active:nth-child(4) ~ li.slide, li:hover:nth-child(4) ~ li.slide { left: 645px; width: 156px; }
動作しているようですが、非常に不便です：
-要素が変化する場合、要素を常に計算する必要があります
-バグがあります-フォントがパスしない場合、メニュー全体がクラッシュします
オプション2
背景アニメーションオプション
メニューはSnickersmixによって作成および表示されました。 そしてその後、私の目が開いた。 彼は「滑らかな色反転」のチップを持っていることがわかりました。 その後、解決策を探し始めましたが、現時点では見つかりませんでしたが、メニュー自体は作成されました。
オプション1a
検索が始まり、「1.5年」オプションが誕生しました。 それは少し装飾が判明しました
私はあなたが何らかの形でフィルターを通してsvg行列を実装しようとすることを望んでいましたが、残念ながら何も起こりませんでした（ オプション3 ）
また、追加のスライド要素の代わりに、前後の擬似要素を介して実行しようとしましたが、成功しませんでした。 CSS4と、親に連絡する機会を待っています。 （ オプション4 ）
これらのイベントはすべて1年前に開催されました。 次に、上記の有声オプションが作成されました。 しかし、これらの実装には小さな問題があります。Windowsフォントを持たないLinuxシステムでは、メニューが壊れます。 しかし、その時点で支配するのは面倒でした。それはまだどこでも使用される予定がなく、作業バージョンを実装するためにいくつかの修正があったため、この作業はすべてメザニンに慎重に置かれて塵を集めました。
それ以来、ほぼ1年が経過し、メニューを修正し、同時に記事を書くことにしました。
そして、このメニューの最後の5番目のバージョンに会ってください
一般に、根本的に新しいものは何も現れていません。 唯一の違いは、サイズがパーセントで示されることです。これにより、フォントの問題が解消され、同時にメニューをラバーまたはアダプティブレイアウトに挿入できるようになります。
また、5番目のオプションにはIE6-9の修正が追加されました。 もちろん、それらにはアニメーションはありませんが、メニューは非常に食用です。
それだけです。 すべてが非常に簡単でシンプルです。
誰かが別の実装オプションを思いついたら、私だけでなく、私も見て喜んでいます。
最後まで読んでくれてありがとう！