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

[BEEware]

Dir auch einen guten Rutsch =]

edit: kann geschlossen werden. funktioniert alles wie gewollt. css hab ich bisher immer unterschätzt ^^

[BEEware]

Ha im IE6 und 7 zerhauts mir die Navi -.-

[Seitengestalter]

OT: Zweimal "genießen" (bei Gemeinsam und Fleischlos) finde ich nicht schön. Da gäbe es doch noch essen, schlemmen, tafeln oder schmausen?

[BEEware]

OT: Zweimal "genießen" (bei Gemeinsam und Fleischlos) finde ich nicht schön. Da gäbe es doch noch essen, schlemmen, tafeln oder schmausen?

Etwas OT

Aber ist so vom Kunden gewünscht. Was soll man machen ^^

Viel mehr würde mich ein IE6-7 Workaround freuen.

[grambler]

Hey BeeWare

Hmm, sieht so aus, als wäre da die Höhe de DIV, welches die Navi umschliesst ein Problem. Im IE7 sieht es fast so aus, als würde die Subnavi einfach auch noch in das DIV mit der Höhe von 50px eingepasst, was dann zu überlagerungen führt.
Erhöh doch mal die Höhe, passiert dann was?

Gruss

[BEEware]

Macht keinen Unterschied

[grambler]

Komische Sache... Ich schaus mir Montag nochmal in Ruhe an! Normalerweise macht nur der ie6 so komische sachen :-)

[grambler]

Ciao BEEware, wollte eben kurz reinschauen, aber es kommt nur "No pages found". Bin gestern leider nicht dazu gekommen!

[BEEware]

Ah hey, danke. Ich hab die Seite ausversehen off gesetzt, jetzt läuft sie aber wieder.

Falls du den Code für die Navi willst, hier ist er

.mod_navigation
{
	text-transform:uppercase;
}
.mod_navigation ul
{
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
	border-bottom:1px solid #868686;
}
.mod_navigation li
{
	display:inline;
	margin-right:5px;
	margin-left:5px;
}
.mod_navigation a,
.mod_navigation a:visited
{
	display:inline-block;
	color:#868686;
	text-transform:uppercase;
}
.mod_navigation a:active,
.mod_navigation a:hover
{
	color:#880000;
	text-transform:uppercase;
}
.mod_navigation .active,
.mod_navigation .level_1 .submenu
{
	color:#880000;
	text-transform:uppercase;
}
.mod_navigation ul ul
{
	width:760px;
	position:absolute;
	margin-top:4px;
}
body.speisekarte .mod_navigation,
body.events .mod_navigation
{
	margin-bottom:55px;
}

Ansicht im IE6+7. Kann ich bestätigen auch wen das nur ein NetRenderer-Bild ist. In den echten IEs sieht es genauso aus. Alle anderen Browser machen keine macken

[grambler]

etwa so:
http://screencast.com/t/YTFkMzg4YT
?

IE8 mit eingeschalteter Compatibility-Mode - also IE7 Render Engine.

Problem: position absolute bezieht IE7 auf das Elternelement in deinem Fall, also auf das <li>, wo das second level navi drin steckt.

Mal schauen, ev bau ich mir das kurz nach.

[BEEware]

Kann geschlossen werden. Seite ist produktiv gesetzt und das mit der Navi habe ich inzwischen hinbekommen.

Danke für eure Ansätze.

[schman]

wie hast du's geschafft, wäre schöne wenn du die entsprechenden css regel posten könntest, ich schätze der ein oder andere wird ev. auch auf so ein ähnliches problem stoßen.

[BEEware]

Klar, mach ich doch gerne.

main.css

.mod_navigation {
	height: 27px;
	position: relative;
	text-transform: uppercase;
}
.mod_navigation ul {
	width: 100%;
	border-bottom: 1px solid #868686;
}
.mod_navigation li {
	display: inline;
}
.mod_navigation a, .mod_navigation a:visited, .mod_navigation span.active {
	padding: 5px;
	font-size: 1.091em;
	color: #868686;
}
.mod_navigation a:active, .mod_navigation a:hover, .mod_navigation span.active {
	color: #880000;
}
.mod_navigation .active, .mod_navigation .level_1 .submenu {
	color: #880000;
}
.mod_navigation ul ul {
	left: 0;
	top: 27px;
	position: absolute;
}

ie6.css

.mod_navigation {
	height: 32px;
}
.mod_navigation, .mod_navigation ul {
	overflow: hidden;
}