/ / Foundation Toggle-fähige Sidebar mit Icons wie Wordpress Dashboard - Javascript, jquery, html, css, umschalten

Foundation Toggle-fähige Sidebar mit Icons wie Wordpress Dashboard - Javascript, jquery, html, css, umschalten

Ich versuche, eine Sidebar-Navigation wie zu erstellender im Wordpress Admin-Dashboard verwendete. Ich mag die Option, die Seitenleiste zu reduzieren, aber immer noch die Symbole zu sehen. Ich benutze die Zurb-Foundation und jQuery. Ich habe endlich eine Lösung, von der ich denke, dass sie funktionieren könnte, aber sie macht ein paar lustige Dinge. Das <li>s sind alle unterschiedlich breit, bis ich das Menü zum ersten Mal zusammenfalle und wieder öffne. Dann bleiben sie alle gleich groß. Also hier sind meine Fragen:

  1. Wie kann ich das machen? lis bei der ersten Ladung gleich groß sein?
  2. Wie kann ich die Größe des Hauptinhalts ändern und den Mauszeiger darüber bewegen, wenn sich die Seitenleiste öffnet (anstatt gedrückt zu werden, was gerade passiert)?
  3. Ich möchte, dass die Seitenleiste auf der ersten Seite geöffnet erscheintLaden der Seite (mit Symbolen und Titeln), aber wenn der Benutzer sie geschlossen (nur zur Symbolansicht) schaltet, sollte sie geschlossen bleiben, während sie durch die Site navigieren. Wie mache ich das?

Hier ist ein JsFiddle mit meinem Code.

Antworten:

0 für die Antwort № 1

Hier haben Sie ein Tutorial, das funktioniert, und funktioniert wie ein Zauber, Sie müssen es nur an Foundation anpassen Anleitung

In Ihrem speziellen Fall, da Sie die Symbole immer sichtbar haben möchten, öffnen Sie einfach die Komponenten.css und ersetzen Sie sie

.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}

mit

.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}