Material Design erweiterbar Schublade

Ich entwickle eine Web-Anwendung mit Material Design Lite.Material Design erweiterbar Schublade

Eine der Voraussetzungen ist: Eine Sidebar existiert so, dass standardmäßig die Icons der Menüpunkte in kleinerer Breite (zB 50px) angezeigt werden. Ein Klick auf das Menü-Symbol (Hamburger) erweitert die Schublade auf eine größere Größe und zeigt nicht nur die Symbole, sondern auch den Text daneben. Hier ist ein Beispiel dafür, was ich erreichen möchte:

Standard:

erweitern:

Hier ist meine aktuelle 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>

Gibt es eine gute/richtige Art und Weise dies zu tun? Ich habe mich gefragt, wie das geht und habe keine gute Lösung gefunden.

Quelle

2016-04-23 arazzy

Werfen Sie einen Blick auf this answer. Ich denke, es ist ein guter Ansatz, um diesen Effekt zu erzielen.

Sie können dann fallen nur die polyfill und in Ihrem CSS etwas schreiben wie:

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

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

Wenn Sie ein polyfill denken zu viel ist gerade diese Funktionalität hinzuzufügen ich von einer anderen Art und Weise denken, dass ‚doesn Verwenden Sie kein Javascript, aber es wäre nicht so flexibel in Bezug darauf, wie Sie das Anzeigen/Verbergen animieren, wenn Sie es animieren möchten. Dabei wird der Hauptinhaltsbereich über der Schublade überlappt. Gib mir einen Moment und ich werde eine Demo nachmachen.

EDIT

Hier ist, was ich so weit als nicht-js Ansatz zu denken (erfordert noch einige für die Hin- und Herschalten der is-expanded Klasse): 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; 
}

On jetzt es bei der Suche Ich denke nicht, dass es eine sehr gute Herangehensweise ist (aus einer Reihe von Gründen, die Sie vielleicht damit herumspielen würden), aber ich werde es hier lassen, für den Fall, dass jemand es verbessern möchte.

EDIT 2

modifizierte ich die vorherige Demo, es zu vereinfachen und zum Öffnen/Schließen Animation zu ermöglichen. Ich weiß nicht, ob Sie an diesem Punkt Dinge genau so "materiell" machen würden, aber ich denke, es ist praktikabel und besser als mein vorheriger Versuch.Demo: 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; 
}

Quelle

2016-04-23 15:31:22

Ich mag diesen Ansatz. Es wäre schön, wenn die Schublade expandierende/kollabierende war immer noch animiert obwohl – arazzy

Hallo, bitte sehen Sie meine zweite Bearbeitung :) –

Funktioniert super! Thanks a ton – arazzy

Dies kann nicht durch reines CSS erfolgen. Sie müssen jQuery verwenden. So etwas wie das

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

});

Angenommen, Sie haben versteckte Links durch Anzeige: keine.

Wenn Sie hier Ihre CSS-und HTML-Code können Sie mir mit konkreten Beispiel helfen.

Quelle

2016-04-23 15:06:50 iamwtk

Dank, fügte mein HTML zu meinem Beitrag und haben keine CSS noch andere als das Material Design lite Sheet – arazzy

ich das Material Design lite und die ganze Schublade kontrolliert wird durch ihre js Datei verwaltet, weil es ist auf den kleineren Bildschirmen etc. versteckt. So würde es wirklich tief im gesamten Rahmen erfordern. – iamwtk

Material Design erweiterbar Schublade

Antwort

Verwandte Themen