デスクトップサイトのナビゲーションを折りたたみ可能なメニューに変換するにはどうすればよいですか？

Question

ヘッダーにはナビゲーションメニューがありますが、保存しておくことをお勧めしますが、あまりにも多くのスペースを占有しています。モバイルで見栄えを良くするにはどうすればよいですか？

Answer 1

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

ウランの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モバイルサイトの両方でこのアプローチが使用されます。あなたはそこで働いているのを見ることができます。