Seite 1 von 1

Navigation mit Navigation Universell

Verfasst: Fr 19. Jun 2009, 10:38
von Alexander86
Ich versuche gerade eine Navigationsleiste mit dem Modul Navigation Universell aufzubauen, die bis jetzt so aussieht:
smenu.gif
smenu.gif (3.07 KiB) 3229 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

Re: Navigation mit Navigation Universell

Verfasst: Fr 19. Jun 2009, 11:09
von kummer
Alexander86 hat geschrieben: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

Re: Navigation mit Navigation Universell

Verfasst: Fr 19. Jun 2009, 11:46
von 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?

Re: Navigation mit Navigation Universell

Verfasst: Fr 19. Jun 2009, 12:06
von kummer
wie beschrieben. genauer geht nicht fast nicht mehr. ich mutmasse mal:
  • weder plus noch minus = maskNormal und maskSelected
  • plus = maskNormalSub
  • minus = maskSelectedSub