Navigation mit Navigation Universell

[Alexander86]

Ich versuche gerade eine Navigationsleiste mit dem Modul Navigation Universell aufzubauen, die bis jetzt so aussieht:

smenu.gif (3.07 KiB) 3216 mal betrachtet

HTML:

Code: Alles auswählen

<div id="verticalNavigation">
<ul>
<li><a class="current" href="...">Über uns</a>

<ul>
<li><a href="...">Unternehmen</a></li>
<li><a href="...">Philosophie</a></li>
<li><a href="...">Was wir bieten</a></li>
<li><a class="current" href="...">Standorte/Partner</a>

<ul>
<li><a class="current" href="...">Vertrieb</a></li>
<li><a href="...">Service</a></li>
</ul>

</li>
<li><a href="...">So finden Sie uns</a></li>
</ul>

</li>
<li><a href="...">Produkte</a></li>
</ul>
</div>

CSS:

Code: Alles auswählen

#verticalNavigation .current {
background-color: #DDDDDD;
background-image: url(../images/verticalNavigation/minus.gif);
}
#verticalNavigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#verticalNavigation ul ul {
margin-left: 10px;
}
#verticalNavigation a {
display: block;
padding: 3px 0px 3px 25px;
border-bottom: 1px solid #CACACA;
background-image: url(../images/verticalNavigation/plus.gif);
background-repeat: no-repeat;
background-position: 10px;
color: #000000;
text-decoration: none;
}
#verticalNavigation a:hover {
background-color: #DDDDDD;
text-decoration: underline;
}

und das Modul:

Code: Alles auswählen

$aQnavigation->maskNormal(4, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskNormalSub(4, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskSelected(4, '<li><a class="current" href="{link}">{name1}</a></li>');
$aQnavigation->maskSelectedSub(4, '<li><a class="current" href="{link}">{name1}</a><ul>{sub}</ul></li>');

$aQnavigation->maskNormal(3, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskNormalSub(3, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskSelected(3, '<li><a class="current" href="{link}">{name1}</a></li>');
$aQnavigation->maskSelectedSub(3, '<li><a class="current" href="{link}">{name1}</a><ul>{sub}</ul></li>');
$aQnavigation->setSub(3, $aQnavigation->showNavigation(4));

$aQnavigation->maskNormal(2, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskNormalSub(2, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskSelected(2, '<li><a class="current" href="{link}">{name1}</a></li>');
$aQnavigation->maskSelectedSub(2, '<li><a class="current" href="{link}">{name1}</a><ul>{sub}</ul></li>');
$aQnavigation->setSub(2, $aQnavigation->showNavigation(3));

$aQnavigation->maskNormal(1, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskNormalSub(1, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskSelected(1, '<li><a class="current" href="{link}">{name1}</a></li>');
$aQnavigation->maskSelectedSub(1, '<li><a class="current" href="{link}">{name1}</a><ul>{sub}</ul></li>');
$aQnavigation->setSub(1, $aQnavigation->showNavigation(2));

$aQnavigation->maskNormal(0, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskNormalSub(0, '<li><a href="{link}">{name1}</a></li>');
$aQnavigation->maskSelected(0, '<li><a class="current" href="{link}">{name1}</a></li>');
$aQnavigation->maskSelectedSub(0, '<li><a class="current" href="{link}">{name1}</a><ul>{sub}</ul></li>');
$aQnavigation->setSub(0, $aQnavigation->showNavigation(1));

if (!$aQnavigation->navigationEmpty(0)) {
$aQnavigation->before(0, '<div id="verticalNavigation"><ul>');
$aQnavigation->after(0, '</ul></div>');
echo $aQnavigation->showNavigation(0);
}

Jetzt sollen aber die Navigationspunkte, die keine Unterpunkte enthalten ein anderes Icon bekommen. Diese haben momentan ein Plus davor bzw. ein Minus wenn sie angeklickt wurden.
Was muss ich da am Modul ändern, damit ich das hinbekomme?

Gruß Alex

[kummer]

Jetzt sollen aber die Navigationspunkte, die keine Unterpunkte enthalten ein anderes Icon bekommen. Diese haben momentan ein Plus davor bzw. ein Minus wenn sie angeklickt wurden.
Was muss ich da am Modul ändern, damit ich das hinbekomme?

am modul gar nichts. aber an der maske. maskNormal und maskSelected sind die masken für für die punkte ohne untermenupunkte. maskNormalSub und maskSelectedSub für diejenigen menupunkte, die untermenupunkte enthalten.

wir unterscheiden also folgende fälle:

• maskNormal: nicht selektiert, keine untermenupunkte vorhanden
• maskNormalSub: nicht selektiert, untermenupunkte vorhanden
• maskSelected: selektiert, keine untermenupunkte vorhanden
• maskSelectedSub: selektiert, untermenupunkte vorhanden

[Alexander86]

Und wie müsste dann das HTML aussehen? Bis jetzt haben alle Elemente ein Plus, nur die .current-Elemente bekommen ein Minus?
Brauche ich jetzt für jedes Icon eine CSS-Klasse?

[kummer]

wie beschrieben. genauer geht nicht fast nicht mehr. ich mutmasse mal:

• weder plus noch minus = maskNormal und maskSelected
• plus = maskNormalSub
• minus = maskSelectedSub