素材設計拡張可能な引き出し

Material Design Liteを使用してWebアプリケーションを開発しています。素材設計拡張可能な引き出し

要件の1つは次のとおりです。サイドバーは、デフォルトでメニュー項目のアイコンを小さな幅（たとえば50ピクセル）で表示するように存在します。メニュー（ハンバーガー）アイコンをクリックすると、引き出しをより大きなサイズに展開し、アイコンだけでなくその横のテキストも表示します。ここで私が達成したいものの一例である：

デフォルト：

展開します。ここでは

は私の現在のHTMLです：

<body> 
    <!-- Always shows a header, even in smaller screens. --> 
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 
     <header class="mdl-layout__header"> 
      <div class="mdl-layout__header-row"> 
       <button class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">menu</i> 
       </button> 
       <!-- Add spacer, to align navigation to the right --> 
       <div class="mdl-layout-spacer"></div> 
       <!-- Navigation. We hide it in small screens. --> 
       <button class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">apps</i> 
       </button> 
      </div> 
     </header> 
     <div class="mdl-layout__drawer"> 
      <span class="mdl-layout-title"></span> 
      <nav class="mdl-navigation"> 
       <a class="mdl-navigation__link" href=""> 
        <i class="material-icons md-dark">account_circle</i> 
        <span>Account</span> 
       </a> 
       <a class="mdl-navigation__link" href=""> 
        <i class="material-icons md-dark">home</i> 
        <span>Home</span> 
       </a> 
       <a class="mdl-navigation__link" href=""> 
        <i class="material-icons md-dark">assignment</i> 
        <span>Reports</span> 
       </a> 
       <a class="mdl-navigation__link" href=""> 
        <i class="material-icons md-dark">input</i> 
        <span>Logout</span> 
       </a> 
      </nav> 
     </div> 
     <main class="mdl-layout__content"> 
      <div class="page-content"> 
       <!-- Your content goes here --> 
       @RenderBody() 
      </div> 
     </main> 
    </div> 
</body>

は正しい/良いありこれを行う方法？私はこれがどうやってできるのだろうと思っていたし、良い解決策が出てこなかった。

出典

2016-04-23 arazzy

this answerをご覧ください。私はそれがこの効果を達成するための良いアプローチだと思います。

あなたは、その後だけでポリフィルをドロップすると、あなたのCSSで何か書くことができます：あなたはポリフィルはちょうどこの機能を追加することが多すぎると思うなら、私は「doesnの一つの他の方法を考えることができ

.mdl-navigation .material-icons { 
    opacity: 0; 
    transition: 250ms opacity ease-in-out; 
} 

.mdl-navigation[min-width~="200px"] .material-icons { 
    opacity: 1; 
}

を任意のjavascriptを使用しますが、アニメーション化したい場合は、表示/非表示をどのようにアニメートするかに関して柔軟性がありません。それは、メインのコンテンツ領域を引き出し上に重ねることを含む。私に瞬間を与えて、私はデモを模擬します。今それを見にhttps://jsfiddle.net/damo_s/27u4huzf/2/

.mdl-layout__drawer { 
    transform: translateX(0); 
    z-index: 1; 
    box-shadow: none; 
    border-right: 0; 

    &.is-expanded { 
    + .mdl-layout__header { 
     margin-left: 240px!important; 

     &:before { 
     width: 0; 
     left: 200px; 
     } 
    } 

    ~ .mdl-layout__content { 
     margin-left: 240px!important; 

     &:before { 
     width: 0; 
     left: 200px; 
     } 
    } 
    } 
} 

.mdl-layout__header, 
.mdl-layout__content { 
    margin-left: 55px!important; 
} 

.mdl-layout__header { 
    z-index: 2; 

    &:before { 
    background: #fff; 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 15px; 
    height: 100%; 
    left: 40px; 
    } 
} 

.mdl-layout__header-row { 
    padding: 0 16px 0 22px; 
} 

.mdl-layout__content { 
    background: #878787; 
} 

.mdl-layout__drawer-button { 
    display: none; 
} 

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover { 
    background-color: transparent; 
}

：

EDIT

は、ここで私は（まだis-expandedクラスのトグルのためのいくつかが必要です）限り非jsのアプローチとして考えていたものです私はそれが非常に良いアプローチだとは思わないが（あなたがそれを周遊していることに気づくかもしれない多くの理由のために）、しかし誰かがそれを改善したい場合に備えてここでそれを残す。

EDIT 2

私はそれを簡略化し、オープン/クローズアニメーションを可能にするために、前のデモを修正。私はこの時点で、あなたが物事を「物質」的なやり方で行っているのかどうかはわかりませんが、それは私の以前の試みよりも実用的で良いと思います。デモ：https://jsfiddle.net/damo_s/Ln6e4qLt/

.mdl-layout__drawer { 
    overflow: hidden; 
    width: 55px; 
    transform: translateX(0); 
    transition: 250ms width ease-in-out; 

    .mdl-navigation__link span { 
    opacity: 0; 
    transition: 250ms opacity ease-in-out; 
    } 

    + .mdl-layout__header, 
    ~ .mdl-layout__content { 
    transition: 250ms margin-left ease-in-out; 
    } 

    &.is-expanded { 
    width: 240px; 

    .mdl-navigation__link span { 
     opacity: 1; 
    } 

    + .mdl-layout__header, 
    ~ .mdl-layout__content{ 
     margin-left: 240px!important; 
    } 
    } 
} 

.mdl-layout__header, 
.mdl-layout__content { 
    margin-left: 55px!important; 
} 

.mdl-navigation { 
    width: 240px; 
} 

.mdl-layout__header-row { 
    padding: 0 16px 0 22px; 
} 

.mdl-layout__content { 
    background: #878787; 
} 

.mdl-layout__drawer-button { 
    display: none; 
}

出典

2016-04-23 15:31:22

私はこのアプローチが好きです。引き伸ばされた崩壊がまだアニメ化されていても、引き伸ばされているといいですね – arazzy

こんにちは、私の第2の編集を見てください:) –

素晴らしい作品です！お返事ありがとうございます – arazzy

これは純粋なCSSで行うことはできません。あなたはjQueryを使う必要があります。このようなもの

$('#hamburger-button').on('click',function() { 
    $('#menu .links').css('display','block'); 

});

ディスプレイで非表示のリンクがあると仮定します。

ここにあなたのCSSとHTMLコードを投稿できるのであれば、私は具体的な例を挙げることができます。

出典

2016-04-23 15:06:50 iamwtk

おかげで、私のポストに私のHTMLを追加し、材料設計のライトと全体の引き出しが自分のjsファイルで管理されている私がチェックした材料設計liteのスタイルシート – arazzy

よりもさらに他の任意のCSSを持っていない、それ理由小さいスクリーンなどに隠されているので、フレームワーク全体で本当に深いカットが必要になります。 – iamwtk

素材設計拡張可能な引き出し

答えて

関連する問題