Vertikale Navigation

[ChrisT]

Hallo zusammen

Ich tue mich gerade ziemlich schwer mit der Formatierung einer vertikalen Navigation (mit Hintergrundbild/Rollover/Active).

Die Schrift von .level_1 soll grösser werden als .level_2 und .level_3. Wie muss ich das im CSS definieren, damit das funktioniert? Wie kann ich alle Level-1-Punkte definieren, ohne dass es auf Level 2 vererbt wird?

Danke im voraus
Chris

[Waldfee]

Es werden immer CSS Eigenschaften vom übergeordneten Element vererbt. Eine Unterbindung der Vererbung ist nicht möglich.

Das was du erreichen willst bzw. so sollte die Struktur aussehen. (im CSS)

1. Ebene: #menu ul li a
2. Ebene: #menu ul li ul li a
3. Ebene: #menu ul li ul li ul li a

HTML mäßig wäre das so

<ul>
 <li><a href="#">Erste Ebene Link 1</a></li>
 <li><a href="#">Erste Ebene Link 2</a>
  <ul>
   <li><a href="#">Zweite Ebene Link 1</a></li>
   <li><a href="#">Zweite Ebene Link 2</a>
    <ul>
     <li><a href="#">Drittte Ebene Link 1</a></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

Alle Angaben die du für das ul, li, a in der ersten Ebene gemacht hast werden bis zu deiner dritten Ebene vererbt. Du kannst das nur ändern indem du die überschreibst. Z.b. so:

#menu ul li a {font-size: 20px;}
#menu ul li ul li a {font-size: 16px;}
#menu ul li ul li ul li a {font-size: 12px;}

a:hover für Hovereffekt und eine klasse deiner wahl z.b. a.active wenn dein Link aktiv(ausgewählt) ist

Gruß Waldfee

[ChrisT]

Dankeschön - das ist perfekt!

[ChrisT]

Kurze Frage: a.active funktioniert nicht - bei aktiven Seiten ist in der Navi beim entsprechenden Eintrag kein Link mehr vorhanden. Wie wird dieser dann angesprochen?

[MacKP]

Hallo ChrisT,
du solltest dir mal den Quellcode anschauen...
li span steht da doch soweit ich weiß. Also nimmst das dann.

Viele Grüße

[wotank]

Kurze Frage: a.active funktioniert nicht - bei aktiven Seiten ist in der Navi beim entsprechenden Eintrag kein Link mehr vorhanden. Wie wird dieser dann angesprochen?

vielleicht noch als Ergänzung:
a:active gilt nur im Moment des Mausklicks!
Mit der gerade aktiven Seite hat das nicht so viel zu tun.

[Waldfee]

Das ist richtig. Wenn du dich über Pseudoklassen informieren willst, kann ich dir diese Seite empfehlen css4you.de

Wenn du willst, das dein Link, sei es das li oder das a eine klasse bei Aktiven Zustand (genau die Seite), dann kannst du das in einer tpl datei tun und dieses dann in den ordner templates speichern und dann im modul als template auswählen.

hier mal meine um li.active a.active zu erzeugen. Ich habe hier ein sehr einfaches Menu, ohne ein zweites lvl oder so. Aber vielleicht klappt es auch bei mehreren.

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>