Neues Backend Menu Teil 3 (CMS)

In unserem Hautpmenü im Admin-Bereich kommen heute die eigentlichen Links sowie Unter-Untermenüs hinzu. Bei der Menüstruktur habe ich mir folgendes ausgedacht:

• Datei
  • Dashboard
  • Neu
    • Ordner
    • Seite
    • Menü
    • Upload
  • Schließen
• Benutzer
  • Verwalten
  • Rollen
• Einstellungen
  • Global
  • Plugins
  • Skins
• ?
  • Hilfe
  • Issue Tracker
  • Blog
  • Über

Das habe ich natürlich in den Installer eingebaut. Allerdings existieren die meisten Seiten noch nicht (das kommt bald ;-)). Hier ist der SQL-Query für die Menüs:

DELETE FROM cl_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),
(8, 3, 'Dashboard', '7', 0),
(9, 3, 'Neu', '8', 3),
(10, 3, 'Schließen', 'javascript:window.close()', 1),
(12, 8, 'Ordner', '13', 0),
(13, 8, 'Seite', '12', 0),
(14, 8, 'Menü', '18', 0),
(15, 8, 'Upload', '19', 0),
(16, 4, 'Verwalten', '11', 0),
(17, 4, 'Rollen', '14', 0),
(18, 5, 'Global', '9', 0),
(19, 5, 'Plugins', '15', 0),
(20, 5, 'Skins', '16', 0),
(21, 6, 'Plugins', '4', 0),
(22, 7, 'Hilfe', 'http://wiki.contentlion.org', 1),
(23, 7, 'Issue Tracker', 'https://code.google.com/archive/p/contentlion/issues', 1),
(24, 7, 'Blog', 'http://blog.stevieswebsite.de', 1),
(25, 7, 'Über', '17', 0);

Fehlen dürfen auch nicht die Namen der Menüs:

DELETE FROM cl_menu_names;
INSERT INTO `cl_menu_names` (`id`, `name`, `dir`) VALUES
(1, '{admin}', '/admin'),
(2, '{mainmenu}', ''),
(3, 'Datei', '/admin'),
(4, 'Benutzer', '/admin'),
(5, 'Einstellungen', '/admin'),
(6, 'Extras', '/admin'),
(7, '?', '/admin'),
(8, 'Datei - Neu', '/admin');

Für die Unter-Untermenüs musste das CSS noch ein wenig verändert werden. Unsere Untermenüs gehen rechts zur Seite. Es wurde bei Menüeinträgen mit Untermenüs ein Pfeil eingefügt. Außerdem muss das Ganze passend positioniert werden. Hier ist nur das neue CSS (/system/skins/backenddefault/style.css):

#globalmenu > ul{
  position:absolute;
  top:86px;
  margin:0;
  padding:0;
  padding-left:10px;
  font-size: 9pt;
  list-style-type:none;
}
#globalmenu li{
  float:left;
  margin-right:10px;
  padding:2px;
}
#globalmenu li ul {
  display:none;
}
#globalmenu li div{
  display:none;
  text-align:right;
  float:right;
  padding-right:5px;
}
#globalmenu li li div{
  display:inline;
}
#globalmenu li:hover ul {
  display:block;
  list-style-type:none;
  padding:0;
  margin:0;
  background-color:#9f9f9f;
  width:200px;
  margin-top:1px;
  position:absolute;
  border:1px solid #000;
  border-top:0;
  z-index:10000000;
}
#globalmenu li:hover ul li {
  padding:0;
  margin:0;
  background-color:#9f9f9f;
  float:none;
  height:15px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
}
#globalmenu li:hover ul li ul {
  display:none;
}
#globalmenu li:hover ul li:hover ul {
  display:block;
  position:relativ;
  top:-1px;
  left:200px;
  border:1px solid #000;
}

Weitere Änderungen gibt es in der Revision 18 bei Google.

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

Kommentare

Daniel schrieb am 27.07.2010:

Ich schlage bei Menüpunkt Datei noch ein Unterpunkt Mediathek vor. Oder eben noch als Unter-Unterpunkt von Upload. MfG Daniel

Über uns

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