Fehler bei der Listendarstellung des Submenus

[wallsinbavaria]

Hallo,

Es hat mich schon einige Zeit lang "genervt", dass die Untermenus nicht in korrektem HTML waren. Bisher war das egal, weil es von den Browsern dennoch richtig dargestellt wurde.
Mit dem Internet Explorer 8 aber wurden die Menus immer "länger" - der Abstand zwischen den einzelnen Unterpunkten wurde durch überflüssige <ul><li ..> zu groß.

Um das zu beheben habe ich in meiner index.php die zuständigen Funktionen angepasst. Der Einfachheit halber hier die beiden überabeiteten Funktionen:

Code Auswählen Erweitern

// ------------------------------------------------------------------------------
// Aufbau des Hauptmenüs, Rückgabe als String
// ------------------------------------------------------------------------------
function getMainMenu() {
global $CONTENT_DIR_ABS;
global $CONTENT_FILES_DIR;
global $CAT_REQUEST;
global $PAGE_REQUEST;
global $specialchars;
global $mainconfig;

$mainmenu = "<ul class="mainmenu">";
// Kategorien-Verzeichnis einlesen
$categoriesarray = getDirContentAsArray($CONTENT_DIR_ABS, false, false);
// numerische Accesskeys für angezeigte Menüpunkte
$currentaccesskey = 0;
// Jedes Element des Arrays ans Menü anhängen
foreach ($categoriesarray as $currentcategory) {
// Wenn die Kategorie keine Contentseiten hat, zeige sie nicht an
if (getDirContentAsArray("$CONTENT_DIR_ABS/$currentcategory", true, false) == "")
$mainmenu .= "";
// Aktuelle Kategorie als aktiven Menüpunkt anzeigen...
elseif ($currentcategory == $CAT_REQUEST) {
$currentaccesskey++;
$mainmenu .= "<li class="mainmenu"><a href="index.php?cat=$currentcategory" class="menuactive" accesskey="$currentaccesskey">".catToName($currentcategory, false)."</a></li>";
if ($mainconfig->get("usesubmenu") > 0)
$mainmenu .= "<li class="mainmenu_submenu">".getDetailMenu($currentcategory)."</li>";
}
// ...alle anderen als normalen Menüpunkt.
else {
$currentaccesskey++;
$mainmenu .= "<li class="mainmenu"><a href="index.php?cat=$currentcategory" class="menu" accesskey="$currentaccesskey">".catToName($currentcategory, false)."</a></li>";
if ($mainconfig->get("usesubmenu") == 2)
$mainmenu .= "<li class="mainmenu_submenu">".getDetailMenu($currentcategory)."</li>";
}
}
// Rückgabe des Menüs
return $mainmenu . "</ul>";
}


// ------------------------------------------------------------------------------
// Aufbau des Detailmenüs, Rückgabe als String
// ------------------------------------------------------------------------------
function getDetailMenu($cat){
global $ACTION_REQUEST;
global $QUERY_REQUEST;
global $CONTENT_DIR_ABS;
global $CONTENT_FILES_DIR;
global $CAT_REQUEST;
global $PAGE_REQUEST;
global $EXT_DRAFT;
global $language;
global $specialchars;
global $mainconfig;

if ($mainconfig->get("usesubmenu") > 0)
$cssprefix = "submenu";
else
$cssprefix = "detailmenu";

$detailmenu = "<ul class="detailmenu">";
// Hack für Ineternet-Explorer //
if ($cssprefix == "submenu")
$detailmenu = "";
// part 1 Hack //
// Sitemap
if (($ACTION_REQUEST == "sitemap") && ($mainconfig->get("usesubmenu") == 0))
$detailmenu .= "<li class="detailmenu"><a href="index.php?action=sitemap" class="".$cssprefix."active">".$language->getLanguageValue0("message_sitemap_0")."</a></li>";
// Suchergebnis
elseif (($ACTION_REQUEST == "search") && ($mainconfig->get("usesubmenu") == 0))
$detailmenu .= "<li class="detailmenu"><a href="index.php?action=search&amp;query=".$QUERY_REQUEST."" class="".$cssprefix."active">".$language->getLanguageValue1("message_searchresult_1", html_entity_decode($QUERY_REQUEST))."</a></li>";
// Entwurfsansicht
elseif (($ACTION_REQUEST == "draft") && ($mainconfig->get("usesubmenu") == 0))
$detailmenu .= "<li class="detailmenu"><a href="index.php?cat=$cat&amp;page=$PAGE_REQUEST&amp;action=draft" class="".$cssprefix."active">".pageToName($PAGE_REQUEST.$EXT_DRAFT, false)." (".$language->getLanguageValue0("message_draft_0").")</a></li>";
// "ganz normales" Detailmenü einer Kategorie
else {
// Content-Verzeichnis der aktuellen Kategorie einlesen
$contentarray = getDirContentAsArray("$CONTENT_DIR_ABS/$cat", true, false);

// Kategorie, die nur versteckte Seiten enthält: kein Detailmenü zeigen
if ($contentarray == "") {
return "";
}

// alphanumerische Accesskeys (über numerischen ASCII-Code) für angezeigte Menüpunkte
$currentaccesskey = 0;

/* ################# */
/* HACK ANFANG */
/* ################# */
// nur eine Inhaltsseite in aktueller Kategorie? Detailmenü ohne Inhalt zurückgeben!
if (count($contentarray) == 1)
return "";
/* ################# */
/* HACK ENDE */
/* ################# */


// Jedes Element des Arrays ans Menü anhängen
foreach ($contentarray as $currentcontent) {
$currentaccesskey++;
// Hack für Internet Explorer - Fortsetzung //
if ($cssprefix == "submenu") {
if (substr($currentcontent, 0, strlen($currentcontent) - 4) == $PAGE_REQUEST) {
$detailmenu .= "<a href="index.php?cat=$cat&amp;page=".
substr($currentcontent, 0, strlen($currentcontent) - 4).
"" class="".$cssprefix."active" accesskey="".chr($currentaccesskey+96)."">".
pageToName($currentcontent, false).
"</a>";
}
// ...alle anderen als normalen Menüpunkt.
else {
$detailmenu .= "<a href="index.php?cat=$cat&amp;page=".
substr($currentcontent, 0, strlen($currentcontent) - 4).
"" class="".$cssprefix."" accesskey="".chr($currentaccesskey+96)."">".
pageToName($currentcontent, false).
"</a>";
}
}
// zusätzlich natürlich noch Aufbau eines Detailmenüs //
else {
// end part II - Hack f. Internet Explorer 8 //
// Aktuelle Inhaltsseite als aktiven Menüpunkt anzeigen...
if (substr($currentcontent, 0, strlen($currentcontent) - 4) == $PAGE_REQUEST) {
$detailmenu .= "<li class="detailmenu"><a href="index.php?cat=$cat&amp;page=".
substr($currentcontent, 0, strlen($currentcontent) - 4).
"" class="".$cssprefix."active" accesskey="".chr($currentaccesskey+96)."">".
pageToName($currentcontent, false).
"</a></li>";
}
// ...alle anderen als normalen Menüpunkt.
else {
$detailmenu .= "<li class="detailmenu"><a href="index.php?cat=$cat&amp;page=".
substr($currentcontent, 0, strlen($currentcontent) - 4).
"" class="".$cssprefix."" accesskey="".chr($currentaccesskey+96)."">".
pageToName($currentcontent, false).
"</a></li>";
}

}
}
// Rückgabe des Menüs
if ($cssprefix == "submenu") {
return $detailmenu;
}
return $detailmenu . "</ul>";
}
}

Damit werden sowohl bei einem "alleinstehendem" waagerechtem Detailmenu wie bei untergeordneten senkrechten Submenus die Abstände richtig definiert und es kommt nicht zu überflüssigen Umbrüchen.
Sehen kann man das unter http://eb-kastulus-rb.bplaced.net

[Hermann]

Das geht mir seit 1.11 auch auf den Keks. Wir überlegen uns schon Methoden, die Gestaltung des Menüs ganz dem Template zu überlassen und es nicht mehr "hardcoded" im Script erzeugen zu lassen.

[azett]

Die Seite bringt nen 404

Werd mir das Problem und deinen Quellcode nochmal in Ruhe ansehen.

[wallsinbavaria]

Hallo Arvid,

Sry, hatte Tippfehler in URL

http://eb-katululs-rs.bplaced.net

Das sollte gehen  

[wallsinbavaria]

schon wieder falsch...

http://eb-kastulus-rs.bplaced.net

wieso kann man in diesem Forum seine eigenen Beiträge nicht bearbeiten?

[azett]

wieso kann man in diesem Forum seine eigenen Beiträge nicht bearbeiten?

Kann man, aber nur 15 Minuten lang

[wasp]

@Arvid: OFFTOPIC. (Wie lange wollte ich DAS schreiben!?   )

Hey Werner!
Du bist zunächst mein ,,Held des Abends'' !
In Anbetracht der Tatsachen habe ich mich nunmehr mal Deinem Hack gewidmet -
Was soll ich sagen? Geilomat!
Dies wird mir bei einigen ,,Zwangsräumungen'' sehr dienlich sein - Schicke Sache.

Good work - It seems so far .... 'cause you ll newer know !  

[azett]

So, nach dem Durchsehen des Codes fällt mir auf, daß du die logische Struktur des Menüs durcheinanderwürfelst. Im CMS soll es so sein:

• Aktive Kategorie
  
  • Inhaltsseite
  • Inhaltsseite
  • Inhaltsseite
• Kategorie
• Kategorie

Was du mit dem Hack draus machst, ist:

• Aktive Kategorie
• Inhaltsseite
• Inhaltsseite
• Inhaltsseite
• Kategorie
• Kategorie

Das mag eine Lösung für das Problem der zu weiten Abstände sein (valides HTML ists übrigens in beiden Fällen), zerstört aber die logische Menüstruktur: Inhaltsseite und Kategorien sind nun auf der gleichen Hierarchieebene in der Liste, was z.B. mit nichtgrafischen Browsern dazu führt, daß man die eigentliche Struktur nicht mehr erkennt. Nimm mal deine CSS-Datei raus, dann siehst du, was ich meine.

Die eigentliche Lösung für das Problem ist in meinen Augen reines CSS: Es sollte schon mit der Anpassung der Margins und Paddings der Menü-ULs und -LIs getan sein. Schau dir mal das CSS der mit 1.11.x ausgelieferten Layouts, die das Submenü verwenden, an.

[stefanbe]

Also eigendlich ist das ja so wenn ich nicht total daneben liege

Code Auswählen Erweitern

<ul class="mainmenu">
   <li class="mainmenu">Kategorie</li>
   <li class="mainmenu">Kategorie
      <ul class="detailmenu">
         <li class="detailmenu">Inhaltsseite</li>
         <li class="detailmenu">Inhaltsseite</li>
      </ul>
   </li>
   <li class="mainmenu">Kategorie</li>
</ul>und nicht

Code Auswählen Erweitern

<ul class="mainmenu">
   <li class="mainmenu">Kategorie</li>
   <li class="mainmenu">Kategorie</li>
   <li class="mainmenu_submenu">
      <ul class="detailmenu">
         <li class="detailmenu">Inhaltsseite</li>
         <li class="detailmenu">Inhaltsseite</li>
      </ul>
   </li>
   <li class="mainmenu">Kategorie</li>
</ul>in der style.css bei li.detailmenu display:block;

das würde bei nichtgrafischen Browsern den lehren <li> punkt beheben und bei den anderen die lücke

was die anderen Browser auser Fire... davon halten kann ich leider nicht testen

zu änderner code in der index.php

Code (php) Auswählen Erweitern


/* das hier */ $mainmenu .= "<li class="mainmenu"><a href="index.php?cat=$currentcategory" class="menuactive" accesskey="$currentaccesskey">".catToName($currentcategory, false)."</a></li>";
/* ersetzen mit dem */  $mainmenu .= "<li class="mainmenu"><a href="index.php?cat=$currentcategory" class="menuactive" accesskey="$currentaccesskey">".catToName($currentcategory, false)."</a>";

/* das hier */  $mainmenu .= "<li class="mainmenu_submenu">".getDetailMenu($currentcategory)."</li>";
/* ersetzen mit dem */  $mainmenu .= getDetailMenu($currentcategory)."</li>";
 mfg. stefanbe

[stefanbe]

Nachtrag

Code (php) Auswählen Erweitern


if ($mainconfig->get("usesubmenu") > 0)
      $mainmenu .= getDetailMenu($currentcategory)."</li>";
/* das noch dazu */ else $mainmenu .= "</li>";
 

Code (php) Auswählen Erweitern


/* das noch ändern */ $mainmenu .= "<li class="mainmenu"><a href="index.php?cat=$currentcategory" class="menu" accesskey="$currentaccesskey">".catToName($currentcategory, false)."</a>";
if ($mainconfig->get("usesubmenu") == 2)
/* das noch ändern */    $mainmenu .= getDetailMenu($currentcategory)."</li>";
/* das noch dazu */ else $mainmenu .= "</li>";
 stefanbe

[azett]

Also eigendlich ist das ja so
[...]
und nicht
[...]

Ich werd das nochmal prüfen.

[azett]

Die eigentliche Lösung für das Problem ist in meinen Augen reines CSS

Ich hab grad ein Layout mit Submenü von 1.10 auf 1.11 geupdatet und hatte das selbe Problem: Zu weiter Abstand zwischen den Menüpunkten. Ich habe die Definition von li.detailmenu angepaßt: display:inline; gelöscht (macht die Abstände weg) und dafür list-style-type:none; hinzugefügt, um die Aufzählungszeichen zu unterdrücken.

[stefanbe]

Hallo azett

Dann gibts halt immer noch das mit der lehren li in Textbrowsern was nicht wirklich schön ist und laut HTML ist es eigendlich so wie meine änderung.
Das Problem seh ich halt mit der lehren li die auch den abstand erzeugt.
Zum verständnis Textbrowser sind für Blinde sehr gut benutzbar zum einen wegen der Braillezeile die jede zeile in Punkschrieft übesetzt und da ist das dann nur ein * und zum anderen bei Screenreadern die jede zeile Vorlesen.
z.B.
* Kategorie ( Braille: 8Punkte 8Punkte 8Punkte .... Screenreader: Stern mit Link Kategorie )
* ( Screenreader: Stern )
 + Inhaltsseite ( Screenreader: Plus mit Link Inhaltsseite )
 + Inhaltsseite
* Kategorie

Der Blinde weis *=Liste und +=Subliste, jetzt muss er vermuten das der * ohne was eigendlich der * Kategorie dadrüber sein soll er sieht es ja nicht.

mfg. stefanbe

ps: li.detailmenu display:block; ist da nicht ganz unwichtig grad bei Buttons

[azett]

Also eigendlich ist das ja so wenn ich nicht total daneben liege

Code Auswählen Erweitern

<ul class="mainmenu">
   <li class="mainmenu">Kategorie</li>
   <li class="mainmenu">Kategorie
      <ul class="detailmenu">
         <li class="detailmenu">Inhaltsseite</li>
         <li class="detailmenu">Inhaltsseite</li>
      </ul>
   </li>
   <li class="mainmenu">Kategorie</li>
</ul>und nicht

Code Auswählen Erweitern

<ul class="mainmenu">
   <li class="mainmenu">Kategorie</li>
   <li class="mainmenu">Kategorie</li>
   <li class="mainmenu_submenu">
      <ul class="detailmenu">
         <li class="detailmenu">Inhaltsseite</li>
         <li class="detailmenu">Inhaltsseite</li>
      </ul>
   </li>
   <li class="mainmenu">Kategorie</li>
</ul>

Jau, das sieht gut aus. Ich kümmer mich drum. Der Wegfall der CSS-Klasse mainmenu_submenu wird vermutlich Änderungen im CSS nach sich ziehen, das muß ich prüfen.

[muccarlo]

Wenn mir das Mozilo nicht so zusagen würde, dann hätte ich bestimmt schon lange aufgeben.  
Die Darstellung des 1. Beitrages ist Klasse.
Mein erstes Mozilo war mozilocms1_11_0_1, denke ich. Da hatte ich meine css für mich angepasst. Leider löschte ich zwischenzeitlich meine entsprechende eigene Hilfedatei.
Dadurch ist nur das Normales Detailmenü sauber, ohne die großen Leerräume, wie bei den Submenues, Ich nutze das (ursprüngliche) CMS Original.
Mit WinMerge werde ich Morgen meine css mit der aktuellen css abgleichen. Das Wetter ist entsprechend