2. Menülevel

Hallo zusammen,

ich komme bei der Einbundung meines Untermenüs nicht voran, vielleicht weiß von euch jemand an welcher Stelle ich im CSS oder im Template was drehen muß…

Also eine kurze Erklärung:
Level 1 hat 4 Menüpunkte, einer davon hat einige Unterpunkte, die entsprechende Einblendung und Markierung dieser klappt soweit auch super.
Problem dabei ist dann jedoch, dass die Menüpunkte des Level 2, Kindelemente des Level 1 sind.

So siehts momentan aus:
http://der-matthes-und-frau-hofer.de/aktuell.gif

So solls werden:
http://der-matthes-und-frau-hofer.de/so-solls-sein.gif



Ich würde es bevorzugen, wenn Level 2 aus der Level 1 Liste rauskommt, so dass ich es besser platzieren kann.

Wie kann ich dies realiseren? Anbei ein Bild wie es aussieht bzw. aussehen soll.


Besten Dank für jeden eurer Tipps,
m.orange

Hallo m.orange,
naja, so auf dem Trockenen ist mit CSS nicht wirklich praktisch...
so kann man nur ins blaue reinraten...
Aber wenn du das anders Positionieren möchtest hilft durchaus 'position'.

Ansonsten kann ich immer empfehlen bei ner Navi nicht level1 etc. zu benutzen sondern eher ul li -> level1 / ul ul li -> level2 usw... Da geht dann schon einiges variabler als mit level1 etc.

Wenn du die Navigationsebenen aber komplett voneinander getrennt haben möchtest, aber doch mit dem navigationsmodul arbeiten willst um die Ebenen immer noch in Beziehung zueinander zu haben (also die Klasse .trail wenns nen Unterpunkt ist etc.). Dann empfehle ich erst mal das Tutorial wo aufgezeigt wird wie man was am besten einstellen kann -> http://de.contaowiki.org/typolight/T...vigationsmenue
Dann legst du einfach für jede Ebene ein NavigationsModul an und positionierst die dann nach deinen Wünschen.

Viele Grüße

HI

vielleicht hilft dir auch das. Da ging es um etwas ähnliches, du kannst ja mal schauen, ob du davon etwas verwenden oder lernen kannst. :)

Sebastian

Hallo MacKP & Sebastian,

besten Dank erst einmal für eure Tipps. Dein Tutorial hab ich mir eigentlich soweit schon durchgearbeitet, aber vielleicht habe ich da ja was übersehen. Jedenfalls konnte ich nichts finden, was den Teil betrifft.

Das was "BEEware" dort in seinem Thread versucht, scheint bei mir so nicht zu funzen, habs erstmal nur über Firebug kurz getestet. :( Wofür soll eigentlich die .trail class Verwendung finden?


Anbei mal den aktuellen HTML Code…

HTML-Code:

---

<div class="mod_navigation block" id="menu1">

<a href="index.php/was-wir-machen.html#skipNavigation10" class="invisible">Navigation überspringen</a>
  <ul class="level_1">
    <li class="first"><a href="index.php/punkt1.html" title="wer wir sind" class="first" onclick="this.blur();">punkt1</a></li>
  <li class="active submenu"><span class="active submenu">punkt2</span>

    <ul class="level_2">
      <li class="nav2 first"><a href="punkt2 # punkt1.html" title="punkt2 # punkt1" class="nav2 first" onclick="this.blur();">punkt2 # punkt1</a></li>
      <li><a href="index.php/punkt2 # punkt2.html" title="punkt2 # punkt2" onclick="this.blur();">punkt2 # punkt2</a></li>
      <li><a href="index.php/punkt2 # punkt3.html" title="punkt2 # punkt3" onclick="this.blur();">punkt2 # punkt3</a></li>
      <li><a href="index.php/punkt2 # punkt4.html" title="punkt2 # punkt4" onclick="this.blur();">punkt2 # punkt4</a></li>
      <li><a href="index.php/punkt2 # punkt5.html" title="punkt2 # punkt5" onclick="this.blur();">punkt2 # punkt5</a></li>
      <li class="last"><a href="index.php/punkt2 # punkt6.html" title="punkt2 # punkt6" class="last" onclick="this.blur();">punkt2 # punkt6</a></li>
  </ul>

  </li>
  <li class="last"><a href="index.php/punkt3.html" title="punkt3" class="last" onclick="this.blur();">punkt3</a></li>
  </ul>
 
  <a name="skipNavigation10" id="skipNavigation10" class="invisible">&nbsp;</a>
</div>

---

Beste Grüße und vielen Dank,
m.orange

Hallo m.orange,
die Klasse trail wird vergeben wenn ein Unterpunkt von diesem Punkt aktiv ist.
Damit kann man Elternpunkte immer noch anders darstellen als andere Navipunkte.

Viele Grüße

Hallo MacKP,

hmm okay, da muss ich wohl noch etwas rumprobieren.


Vielen Dank erstmal

Ich bin nicht ganz sicher, ob ich falsch verstehe, aber das Problem scheint nich wirklich groß zu sein:

für das Menü erster Ebene legst Du ein Modul mit Modultyp Navigation an und folgender Konfiguration:

• Startlevel 0
• Stopplevel 1
• Hardllimit: aktiviert

Dieses Modul packst Du in das Seitenlayout und formatierst es per CSS wie du es haben willst.

dann legst Du für die Unternavigation ein weiteres Modul mit Modultyp Navigation an und folgender Konfiguration:

• Startlevel 1
• Stopplevel 1
• Hardllimit: aktiviert

Auch dieses Modul packst Du in das Seitenlayout und formatierst es per CSS wie du es haben willst.

Damit sind Hauptmenü und Sekundärnavigation nicht ineinander verschachtelt und können völlig unabhängig voneinander platziert und gestaltet werden - und das ist es, was Du wolltest, oder?

Hallo,

vielen Dank für eure Tipps, habs jetzt soweit formatiert, dass es gut aussieht.
Jetzt noch eine Kleinigkeit beim Untermenü – ich möchte das hinter jedem dieser Untermenüpunkte noch ein Pfeil gelistet wird. Dafür muss ich ja dann doch das Template editieren. Wo finde ich dieses denn oder welche Variable ist das?


Besten Gruß und vielen Dank,
m.orange

Hallo m.orange,
dafür brauchst du das Template nicht editieren.
Du musst das nur über CSS machen mit background -> http://www.css4you.de/background.html

Viele Grüße

HI

@corticelli: Ich würde ein Modul nehmen. Denn so ist HTML-seitig absolut kein hierarchischer Zusammenhang zwischen den Ebenen gegeben. Und per CSS kann man alles zurechtbiegen. ;)

Sebastian

Verstehe ich nicht ganz: wozu benötigt die zweite Ebene semantische Information über die erste oder umgekehrt? Das wäre sicherlich nötig bei einem Baum, aus meiner Sicht jedoch unnötig bei zwei Ebenen ... vielleicht ist es auch eine Abwägungssache: denn das hier erstrebte Ziel mit ineinander verschachtelten UL und CSS zu erreichen, ist vielleicht mit viel Aufwand möglich und erzeugt semantisch korrektes HTML, jedoch dürfte Lösung mit "unabhängigen" ULs deutlich einfacher reaisierbar, wartbarer und damit preiswerter sein. Ich bin jetzt kein absoluter Experte für Barrierefreiheit, gehe jedoch davon aus, dass auch Screenreader mit getrennten URLs kein Problem haben sollten, so dass die Nachteile vermutlich eher akademischer Natur sein dürften. Oder habe ich etwas übersehen?

Hallo zusammen,

ich hab das Menü mit dem Untermenü jetzt so umgesetzt:

HTML-Code:

---

<!-- 1. ebene -->
<ul class="nav1">
  <il><a href="#">punkt 1</a></li>
  <il><a  href="#">punkt 2</a></li>
  <il><a  href="#">punkt 3</a></li>
</ul>

<!-- 2.ebene -->
<ul class="nav2">
  <il class="nav2"><a  class="nav2" href="#">punkt 2 # punkt 1</a></li>
  <il class="nav2"><a  class="nav2" href="#">punkt 2 # punkt 2</a></li>
  <il class="nav2"><a  class="nav2" href="#">punkt 2 # punkt 3</a></li>
  <il class="nav2"><a  class="nav2" href="#">punkt 2 # punkt 4</a></li>
  <il class="nav2"><a  class="nav2" href="#">punkt 2 # punkt 5</a></li>
</ul>

---

soweit sieht das alles ganz gut aus. jetzt möchte ich aber gern, das hinter jedem listenpunkt noch ein pfeil mit im link sitzt.

HTML-Code:

---

<!-- 2.ebene -->
<ul class="nav2">
  <il class="nav2">
    <a class="nav2" href="#">
      <div class="link" punkt 2 # punkt 1</div>
      <div class="pfeil">[COLOR="Red"]→[/COLOR]</div>
    </a>
  </li>

 <il class="nav2">
    <a class="nav2" href="#">
      <div class="link" punkt 2 # punkt 2</div>
      <div class="pfeil">[COLOR="Red"]→[/COLOR]</div>
    </a>
  </li>

 <il class="nav2">
    <a class="nav2" href="#">
      <div class="link" punkt 2 # punkt 3</div>
      <div class="pfeil">[COLOR="Red"]→[/COLOR]</div>
    </a>
  </li>

 <il class="nav2">
    <a class="nav2" href="#">
      <div class="link" punkt 2 # punkt 4</div>
      <div class="pfeil">[COLOR="Red"]→[/COLOR]</div>
    </a>
  </li>

 <il class="nav2">
    <a class="nav2" href="#">
      <div class="link" punkt 2 # punkt 5</div>
      <div class="pfeil">[COLOR="Red"]→[/COLOR]</div>
    </a>
  </li>

</ul>

---

Bisher habe ich sowas direkt immer im Code gemacht, aber TL arbeitet da ja doch etwas anders und über ein Bild im den Pfeil darzustellen würde ich ungern, da der Pfeil ja zur UTF8 Codierung gehört.

Hat jemand dazu vielleicht ne Idee, wie ich dies per Code umsetzen kann in TL?


Besten Dank für eure Hilfe,
m.orange

Zitat:

---

Zitat von MacKP

Hallo m.orange,
dafür brauchst du das Template nicht editieren.
Du musst das nur über CSS machen mit background -> http://www.css4you.de/background.html

Viele Grüße

---

Ich kann es dir auch noch mal schreiben....

Edit:
Sorry, du willst echt unbedingt den Pfeil so haben?
Nuja, das ist jetzt für Screenreader natürlich absolut ungünstig, da einem dann immer der Pfeil vorgelesen wird....

Wenn du das wirklich unbedingt so haben willst, dann kannst du das Template nav_default.tpl einfach abändern.... und einfach den Pfeil dann da rein machen.
Wie sieht dein Template denn inzwischen aus? Oder hattest du das doch nicht umgestellt?

Hallo MacKP,

jepp das wäre mir sehr lieb, mit Bildern find ich nicht so toll.

So siehts inzwischen aus:

HTML-Code:

---

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php

$navigation = substr($item['class'], 0, 4);
if ($navigation == "nav2") $pfeil = "→";

if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span>
<span class="<?php if ($pfeil): ?>pfeil<?php endif; echo $pfeil; ?>"> </span>
<?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; ?>
                onClick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?>
                <?php if ($pfeil): echo "<span class='pfeil'>".$pfeil."</span>"; endif; ?>
        </a>
<?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

---

Sieht jetzt eigentlich alles so aus, wie gewollt. Hast du noch Optimierungsvorschläge?


Viele Grüße und danke für deine Hilfe,
m.orange

Hallo m.orange,
na wenns funktioniert dann ist ja gut ;-)

Viele Grüße

HI

noch zur Vervollständigung:

Code:

---

a:after {
 content: '→'
 color: #f00;
}

---

CSS ist toll!

Sebastian

Ja, in Browsern die es unterstützen...

Hi besten Dank für eure Tipps
m.orange

Hallo,

ich muss dann doch nochmal fragen, wegen der Menügeschichte :(
Wenn ich einen der Untermenüpunkte angeklickt habe, ist der entsprechende Hauptmenüpunkt nicht mehr aktiviert. Im Code steht folgendes:

HTML-Code:

---

<ul class="level_1">
  <li class="nav1 first"><a class="nav1 first" href="punkt 1">punkt 1</a></li>
  <li class="nav1 trail"><a class="nav1 trail" href="punkt 2">punkt 2</a></li>
  <li class="nav1 last"><a class="nav1 first" href="punkt 3">punkt 3</a></li>
</ul>

---

Über CSS kann ich bis in die Liste greifen, aber die Link Formatierung wird immer wieder vom .nav1 a:link überschrieben bzw. die Formatierung für den Punkt mit dieser Angabe greift nicht .nav1 .trail a:link.

Kann mir jemand sagen warum? Ich sitz bestimmt drauf. Muss ich im BE noch was anpassen?


Besten Gruß und n schönen Abend,
m.orange

Hallo m.orange,
versuch mal

Code:

---

.nav1 a.trail

---

das könnte klappen.

Ist ansonsten etwas schwierig mit deinem erstellten Template.. da die Klassen bei li und bei a stehen... dadurch kann es zu komischen Problemen kommen.
Besser ist eigentlich immer das CSS den gegebenheiten anzupassen und nicht umgekehrt ;-)

Viele Grüße

Hi MacKP,

hmm – dann probier ich nochmal das entsprechend der eigentlichen Templates zu organisieren. Es wäre mir schon sehr lieb für spätere Aktualiserungen das Optimum zu finden. Der Umgang mit einem Frontend CMS ist doch schon sehr anders.


Viele Grüße