in der OO-Listennavigation aus dem Wiki (An example which handles 3 navlevels, while opening only the active childs) läßt sich wie folgt die aktive Rubrik hervorheben. Die 3. Ebene habe ich mal auskommentiert, braucht normalerweise eh niemand.
Habe für die Barrierefreiheit auf Basis von
http://www.einfach-fuer-alle.de/artikel/menues/
noch einige zusätzliche Elemente eingebaut.
Code: Alles auswählen
<div class="MenuContainer">
<p class="dn">Hauptnavigation</p>
<?php
$categories = OOCategory::getRootCategories();
$path = $this->getValue("path");
$path = explode("-", $path);
echo "\n<ul>";
foreach ($categories as $dfn => $cat)
{
if($cat->isonline()==1)
{
if($this->getValue("category_id") == $cat->getID())
{
echo "\n <li><a id=\"menu_on\" href=\"".$cat->getUrl()."\"><dfn>".$dfn.": </dfn><span class=\"hier\">Standort: </span>".$cat->getName()."</a>";
}
else
{
echo "\n <li><a href=\"".$cat->getUrl()."\"><dfn>".$dfn.": </dfn>".$cat->getName()."</a>";
}
if (in_array($cat->_id, $path))
{
$catChilds = $cat->getChildren();
if (count($catChilds) > 0)
{
echo "\n <ul>";
foreach ($catChilds as $dfn1 => $sub1)
{
if($sub1->isonline()==1)
{
if($this->getValue("category_id") == $sub1->getID())
{
echo "\n <li><a id=\"sub_menu_on\" href=\"".$sub1->getUrl()."\"><dfn>".$dfn.".".$dfn1.": </dfn><span class=\"hier\">Standort: </span>".$sub1->getName()."</a>";
}
else
{
echo "\n <li><a href=\"".$sub1->getUrl()."\"><dfn>".$dfn.".".$dfn1.": </dfn>".$sub1->getName()."</a>";
}
if (in_array($sub1->_id, $path))
{
$sub1Childs = $sub1->getChildren();
if (count($sub1Childs) > 0)
{
echo "\n <ul>";
foreach ($sub1Childs as $dfn2 => $sub2)
{
if($sub2->isonline()==1)
{
if($this->getValue("category_id") == $sub2->getID())
{
echo "\n <li><a id=\"sub_sub_menu_on\" href=\"".$sub2->getUrl()."\"><dfn>".$dfn.".".$dfn1.".".$dfn2.": </dfn><span class=\"hier\">Standort: </span>".$sub2->getName()."</a>";
}
else
{
echo "\n <li><a href=\"".$sub2->getUrl()."\"><dfn>".$dfn.".".$dfn1.".".$dfn2.": </dfn>".$sub2->getName()."</a>";
}
/*
if (in_array($sub2->_id, $path))
{
$sub2Childs = $sub2->getChildren();
if (count($sub2Childs) > 0)
{
echo "\n <ul>";
foreach ($sub2Childs as $sub3)
{
if($sub3->isonline()==1)
{
if($this->getValue("category_id") == $sub3->getID())
{
echo "\n <li><a id=\"sub_sub_sub_menu_on\" href=\"".$sub3->getUrl()."\"><dfn>".$dfn.": </dfn><span class=\"hier\">Standort: </span>".$sub3->getName()."</a><span class=\"dn\">. </span></li>\n";
}
else
{
echo "\n <li><a href=\"".$sub3->getUrl()."\"><dfn>".$dfn.": </dfn>".$sub3->getName()."</a><span class=\"dn\">. </span></li>\n";
}
} // if($sub3->isonline()==1)
} // end foreach ($sub2Childs as $sub3)
echo "\n </ul>";
}
}
*/
echo "\n <span class=\"dn\">. </span></li>";
} // end if($sub2->isonline()==1)
} // end foreach ($sub1Childs as $sub2)
echo "\n </ul>";
}
}
echo "\n <span class=\"dn\">. </span></li>";
} // end if($sub1->isonline()==1)
} // end foreach ($catChilds as $sub1)
echo "\n </ul>";
}
}
echo "\n <span class=\"dn\">. </span></li>";
} // end if($cat->isonline()==1)
} // foreach ($categories as $cat)
echo "\n</ul>\n\n";
?>
</div>
Formatierung per CSS, wichtig ist eine ID für die aktive Rubrik, da der IE bis einschließlich Version 6 eine Klasse mal eben völlig ignoriert.
Wie folgt hat man Zugriff auf die einzelnen Elemente (für Barrierefreiheit relative Schriftgrößen!):
Code: Alles auswählen
/* ================================ */
/* Hauptnavigation */
/* ================================ */
.MenuContainer {
}
.MenuContainer ul {
}
.MenuContainer li {
}
.MenuContainer li a:link,.MenuContainer li a:visited,.MenuContainer li a:active {
}
/* aktive Rubrik id, kein class, für IE!!! */
.MenuContainer li a:hover,.MenuContainer li a#menu_on {
}
/* ================================ */
/* Subnavigation 1 */
/* ================================ */
.MenuContainer li ul {
}
.MenuContainer li ul li {
}
.MenuContainer li ul li a:link,.MenuContainer li ul li a:visited,.MenuContainer li ul li a:active {
}
/* aktive Rubrik id, kein class, für IE!!! */
.MenuContainer li ul li a:hover,.MenuContainer li ul li a#sub_menu_on {
}
/* ================================ */
/* Subnavigation 2 */
/* ================================ */
.MenuContainer li ul li ul {
}
.MenuContainer li ul li ul li {
}
.MenuContainer li ul li ul li a:link,.MenuContainer li ul li ul li a:visited,.MenuContainer li ul li ul li a:active {
}
/* aktive Rubrik id, kein class, für IE!!! */
.MenuContainer li ul li ul li a:hover,.MenuContainer li ul li ul li a#sub_menu_on {
}
/* ================================ */
/* bei Bedarf die 3.Ebene hinzufügen */
/* ================================ */
/* hier werden die Listennummerierung, Standort, "Satzende (Punkt für Screenreader)" ausgeblendet */
dfn, .dn, span.hier {
position:absolute;
left:-1000px;
top:-1000px;
width:0px;
height:0px;
overflow:hidden;
display:inline;
}
im Template-Head per Conditional Comments ein zusätzliches Stylesheet für den IE einbinden:
Code: Alles auswählen
<link rel="stylesheet" href="<? echo $REX[HTDOCS_PATH] ?>files/main.css" media="screen, projection" title="Screen Style">
<!--[if IE ]>
<link rel="stylesheet" href="<? echo $REX[HTDOCS_PATH] ?>files/ie.css" media="screen, projection">
<![endif]-->
Code: Alles auswählen
dfn, .dn, span.hier {
display: none;
visibility: hidden;
}
Dieses Stylesheet kann man auch nutzen, um die eine oder andere Schwäche des "die-Standards-nicht-korrekt-interpretierenden" IE auszubügeln!
Gibt wunderbar sauberen und schlanken Code.
Inhaltsverzeichnis lässt sich analog umsetzen.
Gruß
Thorsten