Neues Backend Menu Teil 1 (CMS)

Beim Umstieg in das neue Backend haben wir einfach das globale Menü übernommen. Allerdings werden wir einige der Elemente nicht mehr brauchen. Eine weitere wichtige Frage ist: Wo erstellen wir im Dashboard neue Seiten, Ordner,…

Ich habe mir da etwas schönes abgeguckt: Das Standard-Windows-Menü. Ich möchte das Backendmenü so aufbauen, dass es ungefähr so aussieht. Ich denke jeder kennt das Menü das ich meine, wer nicht, bitte melden^^ Hier einmal die Haupt-Menüpunkte:

• Datei
• Benutzer
• Einstellungen
• Extras
• ?

Jeder dieser Punkte ist ein DropDown-Menü. Bei Datei wäre zum Beispiel bald der erste Punkt Neu. Dieser beinhaltet wiederum ein Dropdownmenü (was zur Seite geht^^). Hier kann man dann zum Beispiel neue Ordner oder Artikel erstellen. Eine weitere Idee wäre sowas wie Zuletzt verwendet. Der Vorteil an der Sache ist folgender: Durch Plugins und Co kann das Menü super erweitert werden. Außerdem finden sich User schneller im CMS zurecht, da er die Steuerung gewohnt ist.

Heute erstellen wir erstmal die oberen Punkte sowie den neuen Style. Fangen wir mal mit der /system/skins/backenddefault/style.css an. Hier werden Schriftgröße und Abstand des Menüs geändert:

#globalmenu{
  position:absolute;
  top:85px;
  margin:0;
  padding:0;
  padding-left:10px;
  font-size: 9pt;
}
#globalmenu li{
  display:inline;
  margin-right:10px;
}

Da wir in unserem Menü-Management noch keine Drop-Down Menüs unterstützen müssen wir einen neuen Menüeintragstyp hinzufügen. Dieser ähnelt den Untermenü, allerdings wird hierbei auch das Label angezeigt. Die JS-Sachen kommen später noch dazu. /system/classes/menuentry.php:

    public function getCode($globalstart,$globalend, $elementstart,$elementend,$class,$index){
        if($this->type == 0){
          $id = $GLOBALS['db']->EscapeString($this->href);
          $link = $GLOBALS['db']->ReadField("SELECT alias FROM {'dbprefix'}pages WHERE id = '".$id."'");
          $res = $elementstart."<a href="".getSetting("global","global","host").$link.".html" title="".$this->title.""
class="".$class." menue-".$id."-".$index."">".$this->title."</a>".$elementend;
        }
        else if($this->type == 1){
          $res = $elementstart."<a href="".$this->href."" title="".$this->title.""
class="".$class." menue-".$this->id."-".$index."">".$this->title."</a>".$elementend;
        }
        else if($this->type == 2){
          $res .=Menu::getCode($this->href,$globalstart,$globalend, $elementstart,$elementend,$class);
        }
        else{
          $res = "<li>".$this->title."</li>";
          $res .=Menu::getCode($this->href,$globalstart,$globalend, $elementstart,$elementend,$class);
        }
        return $res;
    }

Natürlich benötigen wir noch das Menü-Selbst. Das geht so:

DELETE FROMcl_menu INSERT INTO `cl_menu` (`id`, `menuID`, `title`, `href`, `type`) VALUES
(1, 1, 'Datei', '3', 3),
(2, 1, 'Benutzer', '4', 3),
(3, 1, 'Einstellungen', '5', 3),
(4, 1, 'Extras', '6', 3),
(5, 1, '?', '7', 3),
(6, 2, 'Startseite', '1', 0),
(7, 2, 'Login', '2', 0);

Alle Änderungen im Detail gibt es in den Revisionen r11, r12 und r13.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Daniel schrieb am 13.07.2010:

Manoman, ich finde das neue Backendmenü sehr gelungen. Es passt zu unserem Liventwicklungsentwurf.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project