4

ナビゲーションの現在の状態にノッチを配置するために、背景色と同じ色の三角形を使用できることを私は知っています。ただし、固定位置のdiv内にナビゲーションメニューを作成しました。このメニューでは、高いzインデックスと背景色が不透明度0.7に設定されているため、ナビゲーション全体がページコンテンツの上に配置されます。ページを下にスクロールするときに、それを確認してください。ページを下にスクロールすると、不透明なdivを「カット」して、その下のコンテンツを表示する現在の状態のノッチを作成することはできますか？

参考までに、iOSアプリストアで得られるエクスペリエンスを再現しようとしています。残念ながら、画像は削除されました。画像へのリンクをたどると404ページになります。改訂履歴を確認して、画像の元のURLを確認できます。

4

1 に答える 1

1

これを行うには多くの方法がありますが、これが私の見解です。

これは私が使用するレイアウトです。は、真下のノッチ用の で<nav>上部に固定されています。<div>コンテンツは、ナビゲーションとノッチの高さに等しいパディング トップを持つ両方の下にあります。

+--------------------------------+--+
|                                |  |
|               nav (fixed)      |  |   <-- the content is below these fixeds,
|                                |  |       which have a higher z-index
+--------------------------------+  |
|              notch (fixed)     |  |
+--------------------------------+  |
|                                   |
|                                   |
|                                   |
|              content              |
|              section              |
| (padding-top = nav+notch heights) |
|                                   |
|                                   |
+-----------------------------------+

流動的なレイアウトが必要であると想定するので、FlexBox (http://www.w3.org/TR/css3-flexbox/) を使用して、ブラウザーのサイズが変更されたときにノッチを所定の位置に維持することにしました。レイアウトが固定されている場合は、FlexBox を必要とせず、フレキシブル コンテナーにノッチを配置する場所を計算する必要のない、より簡単なソリューションがいくつかあります。

他の部分はかなり簡単なはずなので、ノッチの内訳は次のとおりです<div>

+---------------------------------------------------+
|                 |       |       |                 |
|     spacing     | notch | notch |     spacing     |
|   (flexible)    | left  | right |    (flexible)   |
|                 |       |       |                 |
+---------------------------------------------------+

外側<div>の 2 つの は曲げられ、 と同じbackground-colorです<nav>。次に、内側の 2 つのノッチでグラデーションを使用して三角形を作成します。

background: -webkit-linear-gradient(
    top left,
    rgba(145, 145, 145, 1) 0%,
    rgba(145, 145, 145, 1) 50%,
    transparent 50%,
    transparent 100%
);

左上と右上からグラデーションを開始することで、<div>s は対角線の途中まで埋められます。

残りは、ナビゲーション リンクをクリックしたときにノッチを配置する場所を決定するだけです。<div>これを行うには、ユーザーがクリックした場所を特定した後、フレキシブル s に幅を追加および削除します。屈曲している要素の幅を加算および減算するときに FlexBox がどのように機能するかを理解するには少し時間がかかりますが、コードを調べることでそれを確認できます。

-webkit- プレフィックスを使用して Chrome でこれらすべてを行ったので、Chrome または Safari でこの JSFiddle を実行してください: http://jsfiddle.net/dwJbq/

前に述べたように、これを行う方法は他にもいくつかあります。また、流動的なレイアウトを使用しない場合は、はるかに簡単になります。あなたが試すことができる別のアイデアは、すべてのナビゲーションリンクにノッチを付け、クリックされたリンクの下にノッチを表示/非表示にすることです. これには何も計算する必要はなく、ノッチの背景を変更するだけです。

これを行う方法の例を次に示します: http://jsfiddle.net/V4K6K/1/

于 2012-11-08T21:06:40.823 に答える