2016年9月9日金曜日

[MDL] Waterfall header を使った場合にメニューの一部が隠れるのを防ぐ

イメージ

Google が提唱するマテリアル デザインの開発キット、Material Design Lite (以下、MDL) の Tips です。

今回は、Waterfall header を使った場合にメニューの一部が隠れるのを防ぐサンプル コードを紹介します。

環境

  • MDL バージョン: 1.2.0
  • 動作確認ブラウザ (すべて Windows 10):
    • Chrome 53
    • Microsoft Edge
    • Internet Explorer 11

ライブ デモ (サンプル コード)


解説

メニュー (<ul> タグ) やツールチップを Waterfall header 内に配置すると、表示の際に以下のように一部が隠れてしまうため、ヘッダーの外側に要素を移動させます。

図1

参考

0 件のコメント:

コメントを投稿