5

ヘッダーには残しておきたいナビゲーション メニューがありますが、スペースを取りすぎています。モバイルで見栄えを良くするにはどうすればよいですか?

4

1 に答える 1

3

1 つの可能性は、トグル (内部コンテンツを表示/非表示にするボタン) を使用することです。uraniumjsライブラリにはいくつかのウィジェットが含まれており、そのうちの 1 つは非常にシンプルですが便利なトグル実装です。それも控えめに行います。

uranium js ファイルを含める必要があるため、そのまま使用できます。次に、以下で説明するようにそれを行うことができます。

メニュー コードを、ラッパー コンテナー、「ボタン」セクション、およびコンテンツ セクションの 3 つの部分に変換する必要があります。これらの各パーツを識別するには、次のデータ属性を使用します。

data-ur-set="toggler"

(この属性をラッパーに追加)

data-ur-toggler-component="button"

(この属性を「ボタン」セクションに追加します)

data-ur-toggler-component="content"

(この属性をコンテンツ セクションに追加します)

これらの CSS ルールもどこかに含める必要があります。

*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
  display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
  display: block;
}

ここで実行されている小さな例を見ることができます: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b .

BloomingdalesとMacysの両方のモバイル サイトがこのアプローチを採用しています。あなたはそれがそこで働いているのを見ることができます。

于 2013-04-17T03:31:26.807 に答える