Sidebar umschalten, um Sidebar teilweise zu verstecken

Question

Ich versuche diese Side Navbar neu zu erstellen, die ich auf gefunden habe. Kurz gesagt, es ist eine Navigationsleiste mit einem Bild und Textelementen. Wenn Sie außerhalb der Navigationsleiste klicken, wird der Text überdeckt, so dass nur das Bild angezeigt wird.

Es ist nicht klar, wie Sie Aspekte eines einzelnen "li" -Elements teilweise verbergen können. Meine ursprüngliche Vermutung, was sie Klassen innerhalb eines "li" -Elements erstellt und eine der Klassen bei Klick ausblenden, aber basierend auf Code, der nicht der Fall zu sein scheint.

Jeder Einblick wäre wirklich hilfreich. Selbst der erkannte Name einer Navigationsleiste wäre hilfreich, um mich auf eine Lösung hinzuweisen. Vielen Dank!

Answer 1

machte ich eine saubere Version von dem, was Sie auf dem Laufenden.

http://codepen.io/OfficialAntarctica/pen/MJxMKd

Grundsätzlich haben sie eine offene Breite definiert - was nicht ideal ist, aber width:auto mit Übergängen nicht funktioniert, die Breite auf der Leitung 23 ist und variiert für das, was Sie als Einzelteile wählen.

Answer 2

Die allgemeine Idee ist, dass Sie die Breite des Symbols/Bildes im Menü kennen und die Breite des Menüs auf diese Breite einstellen und dann den Überlauf (den Text in den Menüpunkten) ausblenden. Wenn Sie den Mauszeiger über das Menü halten, ändern Sie die Breite des Menüs, sodass der Menütext angezeigt werden kann.

*{margin:0;padding:0} 
 
nav { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 45px; 
 
    transition: width .5s; 
 
    background: #eee; 
 
} 
 
nav:hover, li { 
 
    width: 175px; 
 
} 
 
img { 
 
    width: 45px; 
 
    float: left; 
 
} 
 
li { 
 
    clear: both; 
 
    list-style: none; 
 
}

<nav> 
 
    <ul> 
 
    <li><img src="https://pbs.twimg.com/profile_images/1980294624/DJT_Headshot_V2_400x400.jpg"> blah blah blah</li> 
 
    <li><img src="https://pbs.twimg.com/profile_images/796243884636512260/zHVoWqKV.jpg"> blah blah blah</li> 
 
    </ul> 
 
</nav>