Azureナビゲーションポータルを作成する

Question

みんな！

私はMicrosoft Azure Navigationを複製したいので私は本当に迷っています。私はそれを始める方法がわからない、またはプラグインで作成することができます。

まだ見たことがない場合は、スライドまたはブレードの移動のようなものです。オプションを押すたびに、横に情報が表示されます。私は本当にあなたが私を提供できる任意の提案に感謝:)

Answer 1

再実装レイアウトを有する

：ここ

は、いくつかのスクリーンショットですAzureに似ていますが、どのようにStart Screen demoはMetro UI CSS Frameworkに実装されています。

this blogの背景アイデアのいくつかと、下のビデオも、Azureデザインコンセプトがどのようにもたらされたかについてのいくつかの追加的な洞察を与えました。

最終的に私はAzureの作品と似ていますが、左側にあり、オプションに基づいて拡張し、残りの部分を主に扱う状態管理システムを持っているナビゲーション "ブレード"ブレードのうちの1つは、ul内の要素として水平にレンダリングされる。各ブレード内には、セル内の上から下への配置を決定するために位置マネージャによって処理される垂直にレンダリングされたグループの集合がある。

Azureと同様に、私はTypeScriptとAngularJSで鉱山を書き、すべてのスタイリングでLESSを使用しました。最も面倒な部分は、おそらくそれを「統一」していたため、あなたはホイールを書き換えずに、表示したいブレードコンテンツの特定の「タイプ」を持つことができ、それぞれ動的にレンダリングしてコンテンツを取得することができます彼らがナビゲートするときに。

高さを効果的に100％に保つdiv要素がいくつかあり、その上にnavbarを配置します。私の左側のナビゲーションバーは、通常は最小化され、サイトのキー「ポータル」間のルーティングを提供するだけなので、例外です。私は左上に絶対位置を持つulをもう一度100％の高さで持っています。その中の各liはいくつかのテンプレート化サイズに基づいたサイズを持っています（ちょうどAzureが設定用のかなり狭い羽根を持つように、テーブルからデータを選択する）。ブレード自体は相対的に配置され、左上に設定され、100％の高さも有する。

申し訳ありませんが、鉱山は公開サイトには存在しませんので、私はそれを共有してインスピレーションを得ることはできません。