Frage zu zweizeiliger Navigation

[BEEware]

Hey Community,

ich beschäftige mich jetzt eine weile mit Typolight und komme inzwischen ganz gut damit zu recht. Ich bin jemand der sich Informationen aus dem Netz sucht und nur Fragen stellt wenn ich dazu nichts finde, so wie in meinem aktuellen Fall.

Ich erstelle gerade eine Homepage mit zweizeiliger Navigation, wobei die zweite Zeile immer die Untermenüpunkte darstellen sollen.

Das ganze habe ich auch hinbekommen. Allerdings auf ne "dirty" Art und Weise wie ich finde.

1. die erste zeile der navigation ist die standard navi mit startlevel 0, stoplevel 1 und aktiviertem hard limit.
2. ein Modul mit individueller Navigation erstellt -> "Navi: Speisekarte"
3. habe ich unter Seitenlayout "Artikel" in der Kopfzeile zugelassen
4. nun bei jeder Unterseite (z.B. bei Speisekarte) das Modul "Navi: Speisekarte" in die Kopfzeile des Artikels eingefügt

Nun meine Frage: Gibt es da eine elegantere Lösung?

HIER könnt ihr euch das ganze mal anschauen. Betroffen ist die Navigation unter Speisekarte, bei der eine zweite Zeile erscheint.

Rein theoretisch müsste es doch klappen wenn für jedes Level eine eigene Unordered List erstellt wird, oder? Das ganze ändere ich dann in der *.tpl?! Könnte das funktionieren? Aber dann würde ja, angenommen ich habe mehrere Unternavis, ALLE angezeigt werden und nicht nur die für Speisekarte.

Ich hoffe das ganze ist verständlich erklärt. Bin grad selbst ein wenig verwirrt =] Anonsten einen guten Rutsch euch allen.

[Sebastian]

HI

Ein Modul im Seitenlayout: Startlevel 0, Stopplevel 1, Hardlimit nicht aktiviert.

Siehe auch http://de.contaowiki.org/typolight/T...vigationsmenue

Sebastian

[BEEware]

Ja stimmt... ich verplante Nuss. Damit und mit der geänderten *.tpl geht es.

Danke für deinen Denkanstoß.

<ul class="level_1">
<?php foreach ($this->items as $item): ?>
<?php 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></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']; ?></a></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

<ul class="level_2">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

[Sebastian]

HI

nein, dazu musst du garantiert kein Template ändern. Einfach die oben genannten Einstellungen im Modul eintragen, nur dieses im Seitenlayout einbinden und das Standardtemplate verwenden. Wirklich!

Sebastian

[BEEware]

Ich habs doch getestet.

Mit dem Standardtemplate verschachtelt er doch die Listen untereinander.

nav_default

<ul class="level_1">
<li class="philosophie first"><a href="philosophie.html" title="Unsere Philosophie" class="philosophie first" accesskey="p" onclick="this.blur();">PHILOSOPHIE</a></li>
<li class="impressionen"><a href="impressionen.html" title="Impressionen" class="impressionen" accesskey="i" onclick="this.blur();">IMPRESSIONEN</a></li>
<li class="active submenu speisekarte"><span class="active submenu speisekarte">SPEISEKARTE</span>
<ul class="level_2">
<li class="active speisekarte_vorspeisen first"><span class="active speisekarte_vorspeisen first">VORSPEISEN</span></li>
<li class="speisekarte_salate"><a href="salate.html" title="Salate" class="speisekarte_salate" onclick="this.blur();">SALATE</a></li>
<li class="speisekarte_klassiker"><a href="unsere-klassiker.html" title="Unsere Klassiker" class="speisekarte_klassiker" onclick="this.blur();">KLASSIKER</a></li>
<li class="speisekarte_gemeinsam"><a href="gemeinsam-geniessen.html" title="Gemeinsam genießen" class="speisekarte_gemeinsam" onclick="this.blur();">GEMEINSAM GENIEßEN</a></li>

<li class="speisekarte_fleischlos"><a href="fleischlos-genie%C3%9Fen.html" title="Fleischlos genießen" class="speisekarte_fleischlos" onclick="this.blur();">FLEISCHLOS GENIEßEN</a></li>
<li class="speisekarte_suess"><a href="suesser-ausklang.html" title="Süßer Ausklang" class="speisekarte_suess" onclick="this.blur();">SÜßER AUSKLANG</a></li>
<li class="speisekarte_kaffee last"><a href="kaffee-spezialitaeten.html" title="Kaffee Spezialitäten" class="speisekarte_kaffee last" onclick="this.blur();">KAFFEE SPEZIALITÄTEN</a></li>
</ul>
</li>
<li class="team"><a href="team.html" title="Das Team" class="team" accesskey="t" onclick="this.blur();">TEAM</a></li>
<li class="presse"><a href="presse.html" title="Presse" class="presse" accesskey="p" onclick="this.blur();">PRESSE</a></li>
<li class="events"><a href="das-erwartet-sie.html" title="Events" class="events" accesskey="e" onclick="this.blur();">EVENTS</a></li>
<li class="anfahrt"><a href="ihr-weg-zu-uns.html" title="Ihr Weg zu uns" class="anfahrt" accesskey="a" onclick="this.blur();">IHR WEG ZU UNS</a></li>
<li class="öffnungszeiten"><a href="oeffnungszeiten.html" title="Öffnungszeiten" class="öffnungszeiten" accesskey="o" onclick="this.blur();">ÖFFNUNGSZEITEN</a></li>

<li class="geschichte last"><a href="geschichte.html" title="Geschichte der Sackpfeife" class="geschichte last" onclick="this.blur();">GESCHICHTE</a></li>
</ul>

[planepix]

OT: Das Restaurant kenne ich, war vor 3 Jahren das letzte Mal dort Lecker wars

Nur bei Öffnungszeiten würde ich das ß in ss umschreiben-> klassische typografische "Todsünde"

[Sebastian]

HI

das ist ja auch richtig, denn nur so entsteht eine logische Navigationsstruktur.

Aber per CSS bekommst du die Punkte dennoch dorthin, wo du sie haben willst!

.mod_navigation ul {
 margin: 0;
 padding: 0;
 text-align: center;
 border-bottom: 1px solid #a2a2a2;
}
.mod_navigation li {
 display: inline;
 margin: 0;
 padding: 0;
 list-style-type: none;
}
.mod_navigation a {
 display: block;
 line-height: 24px;
 padding: 0 7px;
}

Das sollte erstmal alle Punkte der ersten Zeile richtig ordnen. Nur die zweite Ebene ist noch kaputt, aber da würde ich gerne noch kurz auf deiner Website per Firebug testen, allerdings fehlt nun bei mir die zweite Ebene völlig.

Sebastian

[BEEware]

Hatte das extra template drin, jetzt ist wieder die default.

Allerdings hat das "display:block" für den selektor A nicht wirklich was gebracht. Der rest war schon so. Hab jetzt die aktuelle CSS gepostet. Schau dir mal das Menü an

Und ja, das Restaurant ist sehr lecker

/* Navigation */
.mod_customnav ul,
.mod_navigation ul
{
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
	border-bottom:1px solid #a2a2a2;
}
.mod_customnav li,
.mod_navigation li
{
	display:inline;
	margin-right:7px;
	margin-left:7px;
}
.mod_customnav .active,
.mod_navigation .active
{
	color:#880000;
}
.mod_customnav a,
.mod_navigation a,
.mod_customnav a:visited,
.mod_navigation a:visited
{
	display:block;
	color:#a2a2a2;
}
.mod_customnav a:active,
.mod_navigation a:active,
.mod_customnav a:hover,
.mod_navigation a:hover
{
	color:#880000;
}

[Sebastian]

HI

so hat es bei mir gut funktioniert:

Alles mal kurz deaktivieren, was mit dem Menü zu tun hat, und diese Definitionen anlegen:

.mod_navigation ul {
 margin: 0;
 padding: 0;
 text-align: center;
 border-bottom: 1px solid #a2a2a2;
}
.mod_navigation li {
 display: inline;
 margin: 0;
 padding: 0;
 list-style-type: none;
}
.mod_navigation a {
 display: inline-block;
 line-height: 24px;
 padding: 0 7px;
}
.mod_navigation ul ul {
 width: 760px;
 position: absolute;
}

Sebastian

[BEEware]

Ja cool, funktioniert. Danke für deine Hilfe. Aber dank dem "position:absolute" überdeckt es jetzt das Logo bei der zweiten Zeile was eigentlich auch runterrutschen sollte.

Wäre hier nicht doch eine Template-Änderung angebracht?

Für ne normale Navi ist die Verschachtelung auch super und logisch.

[Sebastian]

HI

nein. Dazu gibt es das:

.mod_navigation {
 height: 50px; // 2x line-height + 2x border
}

Sebastian

[BEEware]

Jo, is mir schon klar. Aber ich mag, dass das Logo nur bei Subnavi runterrutscht und ansonsten auf der gleichen Stelle bleibt

Egal, ich pack das noch ^^

Danke dir für deine Geduld und Hilfe.

[Sebastian]

HI

das geht auch. Einfach den Seiten über das Layout oder die Seitenstruktur eine Body-Klasse mitgeben und dann die Höhe anpassen.

Achja: Du schreibst alle Seitennamen in GROSSBUCHSTABEN. Das ist jedoch unnötig. Ändere sie in der Seitenstruktur in ein normales Format und nutze CSS

.mod_navigation a {
text-transform: uppercase;
}

Sebastian

[BEEware]

Haha, ja, es gibt immer so viele Möglichkeiten
Bei mir hat eh jede Seite einen individuellen Body-Tag.

Man lernt halt nie aus ^^

[Sebastian]

HI

genau! Viel Spaß noch und einen guten Rutsch!

Sebastian