Treffen in Düsseldorf - Mi, 5. Juni 2013

Mit diesem CSS wird das Admin-Menü, das sonst am oberen Rand sichtbar ist, am linken Rand "versteckt". Nur in der oberen linken Ecke ist ein Feld vorhanden, auf das man klicken kann (z.B. für Mobilgeräte mit touch-Oberfläche). Das Menü erscheint auch, wenn man den Mauszeiger zum linken Rand bewegt.
Einstellungen für das Admin-Menü sollten sein:
* Adjust top margin: an (sieht einfach besser aus)
* Keep menu at top of page: an
* Plugins: können alle an sein außer shortcuts (habe ich nicht getestet)
Außerdem sollte das overlay-Modul abgeschaltet werden, weil die Overlays sonst erst am unteren Rand erscheinen, wenn das Admin-Menu während des Aufbaus des Overlays noch offen ist.

/* --------------------------------------------------------------------
 * Admin-Menu
 * --------------------------------------------------------------------
 */

/* -- unsichtbar am linken Rand. Wenn der Mauszeiger über den Rand
 *    bewegt wird oder man auf "..." klickt (touch), erscheint es erst.
 */
#admin-menu {
  width: 9em;
  height: 1em;
  left:-8.9em;
}
#admin-menu:hover,
#admin-menu:focus {
  width: 9em;
  height: 100%;
  left: 0px;
}
#admin-menu:before {
  content: "…";
  background-color: inherit;
  color: silver;
  font-weight: bold;
  padding: 0.5em 0.4em 0.4em 9em;
}
#admin-menu:focus:before,
#admin-menu:hover:before {
  content: "";
  padding-right: 0em; 
}
/* das erste Submenü um die Breite der Menüleiste nach rechts verschieben
 */
#admin-menu:focus #admin-menu-wrapper>ul>li>ul,
#admin-menu:hover #admin-menu-wrapper>ul>li>ul {
  margin-left: 9em !important; /* wie #admin-menu:hover{width} */
  margin-top: -2em !important; /* auf gleicher Höhe halten */
}
#admin-menu-wrapper>ul>li:hover {
  background-color: #444;
  border-radius: 10px;
}
#admin-menu-wrapper>ul>li>a.hover {
  background-color: transparent;
  border-radius: 0;
}
/* Suche und Suchergebnisse
 */
#admin-menu input.admin-menu-search {
  width: 9em;
}
#admin-menu:focus #admin-menu-search,
#admin-menu:hover #admin-menu-search {
  position: fixed;
  top: 0;
}
#admin-menu .dropdown .admin-menu-search-results {
  visibility: hidden;
}
#admin-menu:focus .admin-menu-search-results,
#admin-menu:hover .admin-menu-search-results {
  margin-left: 9em !important; /* wie #admin-menu:hover{width} */
  margin-top: 0em !important;
  visibility: visible;
}

Edit: Jetzt wird das CSS hoffentlich richtig angezeigt :-) Anleitung zugefügt.