Druckbare Version
Hi,
habe ein kleines Problem bei der Navigationserstellung in Typolight und zwar möchte ich eine Navigation bauen, wie sie die Seite http://www.allianz.de verwendet, also eine Navigation wo beim überfahren der Hauptpunkte die Unterpunkte angezeigt werden.
Habe das ganze zwar mit CSS ganz gut gelöst, aber irgendwie gefällt es mir nicht, da die Unterpunkte immer ausgeblendet werden.
Wäre super wenn jemand eine Lösung hätte, wie ich das Menü so realisieren könnte in TypoLight.
Grüße
Chris
Hi Chris
Du kannst bei TL alle Templates, also auch das der Navi (nav_default.tpl) deinen Wünschen entsprechend anpassen.
Es gibt auch einige Tutorials im Wiki zum Navimodul.
Ich verstehe nicht ganz, was nicht funktioniert, deshalb so allgemeine Hinweise...
Hallo christopher,
du suchst eine hybrid-Navigation.
Hier eine Anleitung : http://www.alistapart.com/articles/hybrid/
So langsam überleg ich ob nicht doch ne Anleitung für Navigationen mit CSS sinnvoll ist. Diese Seite paste ich hier schon zum 20. mal...
Aber da ich selber das TL-CSS-Framework ncht benutze wäre es nicht so sinnvoll wenn ich das machen würde. Vllt hat da ja mal einer Lust zu.
Vielleicht hättest du lust das zu machen wenn du das in deine Seite eingebaut hast christopher? Reicht ja wenn das erst mal nur zu Horizontalen Navigationen in der Art ist....
Viele Grüße
Hi,
das sieht doch ganz gut aus... vielen Dank!... Joa ne Doku dazu schreiben, kann ich machen ist ja nicht so das Problem, wenn man es eh schonmal gemacht hat.
Grüße
Chris
Soo bin gerade dabei das im Link beschriebene Menü umzusetzen, leider stehe ich da gerade vor einem kleinen JavaScript Problem.
Und zwar muss ich ja um das ganze dynamisch zu gestalten, die class on per JavaScript setzen, dies klappt auch soweit ganz gut, nur leider schaffe ich es nicht die class on wieder zu entfernen.
Meine Funktion sieht bisher so aus,
damit kann ich es zwar setzen, aber bevor ich etwas setze müsste ich erst noch die klasse wieder aus dem vorherigen <li> Element entfernen. Hat da vielleicht jemand einen Denkanstoß für mich?Code:<script type="text/javascript">
function setClass(id) {
document.getElementById(id).className = "on";
}
</script>
Viele Grüße
Chris
Hallo christopher,
schön das du auch bereit bist das als Tutorial zu machen ;-)
Äh.. ja, ich hab das selber ohne JavaScript, da der teil ja nur für IE6.0 oder niedriger ist (und da ich nicht gerade die JS leuchte bin und dem ul die id nav nicht gegeben habe, das also nicht so ganz so ansprechen konnte wie in der Vorlage..). Die haben dann immer noch die Möglichkeit auf die Unterseiten zu kommen indem Sie auf die Oberpunkte klicken.
Für die Klassen on oder off kannst / musst du aber auf jeden Fall das Template bearbeiten.
Da wird ja auch schon unterschieden:
Mal so als Beispiel Auszug.PHP-Code:<?php if ($item['isActive']): ?>
<li id="current" class="active [B]on[/B]
<?php else: ?>
<li <?php if ($item['class']): ?> class="[B]off[/B]
Viele Grüße
Moin,
vielen Dank für den Anstoß, mein JavaScript Ansatz war wirklich entwas umständlich, habe jetzt das Template entsprechend angepasst und es läuft soweit bis auf 1-2 kleinere Fehler. Wenn ich die Fehler beseitigt habe, werde ich das ganze mal dokumentieren.
Grüße
Chris
Super,
da bin ich mal gespannt.
Freu mich drauf ;-)
Dann kann ich endlich nen anderen Link hier im Forum verbreiten *g*
Viele Grüße
Soo leider hat ist jetzt noch ein etwas größeres Problem aufgetreten und zwar funktioniert das ganze zwar auf der ersten Ebene, aber wenn ich dann eine der Unterseiten anklicke, werden logischerweise die anderen Seiten auf dem level nicht mehr angezeigt :( ...
Hallo christopher,
das sind ein paar wenig Informationen...
Hast du eventuell leinen Link?
Hast du vielleicht den Stoplevel eingestellt? So eine Navigation sollte ohne Stoplevel sein...
Ansonsten gib mal bitte die Werte durch, die du bei der Navigation eingestellt hast.
Und wenn es am CSS liegt könnte es an der Klasse trail liegen die du auch noch mit CSS versorgen musst?
Viele Grüße
PS: Vielleicht kannst du ja hier mal schauen: http://www.altstadtschmiede.de/ da habe ich auch diese Art Navigation im Einsatz. Allerdings ohne das JS weil die IE6 User das auch noch anders nutzen können und die Seite eh schon schwierig für den IE ist ;-)
PPS: Ich teste gerade die möglichkeit IE6 mit JS noch mehr biezubringen.... dadurch geht die Navi auch ohne extra Zeug (also "nur" mit dem extra JS *g*). Hier eine Möglichkeit -> http://code.google.com/p/ie7-js/downloads/list
Moin,
genau so soll das bei mir auch aussehen... eine URL habe ich leider nicht, läuft leider noch lokal :( ... habe dir mal die entsprechenden auszüge kopiert. Start und Stoplevel sind beide auf 0 gesetzt.
Hier einmal der HTML Code, der erzeugt wird.
und hier das CSS...HTML-Code:<ul class="level_1" id="nav" ><!-- If Clause Added to check the current level of ul element -->
<li class="active submenu first on"><!-- check the current level of li element and set the class --><span class="active submenu first">Startseite</span><ul class="level_2" ><!-- If Clause Added to check the current level of ul element -->
<li class="first "><!-- checking the level and adding the class type off to the li element --><a href="index.php/testseite2.html" title="testseite2" class="first" onclick="this.blur();">testseite2</a></li>
<li class="last "><!-- checking the level and adding the class type off to the li element --><a href="index.php/testseite.html" title="testseite" class="last" onclick="this.blur();">Testseite</a></li>
</ul>
</li>
<li class="submenu off"><!-- checking the level and adding the class type off to the li element --><a href="index.php/allfinanz.html" title="Allfinanz" class="submenu" onclick="this.blur();">Allfinanz</a><ul class="level_2" ><!-- If Clause Added to check the current level of ul element -->
<li class="first "><!-- checking the level and adding the class type off to the li element --><a href="index.php/fggffgdgsfd.html" title="fgfddfgsgfd" class="first" onclick="this.blur();">gfdgfgfsdfg</a></li>
<li class="last "><!-- checking the level and adding the class type off to the li element --><a href="index.php/fjofg.html" title="fdfggfdgd" class="last" onclick="this.blur();">Tets</a></li>
</ul>
</li>
<li class="off"><!-- checking the level and adding the class type off to the li element --><a href="index.php/immobilien.html" title="Immobilien" onclick="this.blur();">Immobilien</a></li>
<li class="last off"><!-- checking the level and adding the class type off to the li element --><a href="index.php/onlinerechner.html" title="Onlinerechner" class="last" onclick="this.blur();">Onlinerechner</a></li>
</ul>
Wäre super, wenn du mir zeigen könntest, wie du das bei dir gemacht hast...Code:#nav li{margin: 0;float: left;display: block;padding-right: 15px;list-style-type: none;}
#nav li.off:hover{margin: 0;float: left;display: block;padding-right: 15px;list-style-type: none;}
#nav li.off ul,#nav li.on ul{display: none;background: #dee6f6;width: 985px;height: 24px;border-top: 2px solid #e69638;}
#nav li a{/*for all links in the list*/ color: #f90; font-weight: bold; display: block; height: 15px; padding-left: 5px; padding-right: 5px;}
#nav li.off ul,#nav li.on ul{display: none; position: absolute; left: 0;}
#nav li.on a{border: 1px solid #f90;}
#nav li.on ul a,#nav li.off ul a{border: 0;}
#nav li.on ul{display: block;}
#nav li.on ul a,#nav li.off ul a{float: left; /*ie doesn't inherit the float*/ border: 0; color: #f90; width: auto; margin-right: 15px;}
#nav li.on ul{display: block;}
#nav li.off:hover ul{display: block; z-index: 6000; width: 985px; background: #dee6f5;height: 24px;border-top: 2px solid #e69638;}
Grüße
Chris
Hallo christopher,
ich glaub da ist in deinem Template was schief gegangen...
Dein level_1 ul wird geschlossen und erst danach kommt das submenü.
Das gute bei dieser Art Menü ist aber eigentlich das die ul richtig ineinander verschachtelt sind.
Ich hab eigentlich nur eine Navigation gemacht und dann den CSS code von dem Beispiel ein wenig abgeändert... den kannst du ja bei mir ablesen und schauen. Aber wie gesagt: ich nutze Yaml, also ist es etwas Yaml speziell aufgebaut und du solltest das dann nicht einfach kopiere (wegen Lizenz etc.) ;-)
Bring est mal dein Template wieder in Ordnung, dann kann man weiter schauen.
Ich hab bei mir auch dem ul nicht die extra Klasse gegeben... geht auch ohne wie man sieht, nur greift dann das JS von der Vorlage nicht.
Viele Grüße
Moin,
habs mir gerade nochmal angeguckt, das level_1 ul wird erst am Ende wieder geschlossen... die anderen beiden </ul> schließen jeweils die level_2 ul.
Viele Grüße
Chris
ups... sorry, hatte ein <ul> übersehen in der 2. Zeile...
Hätte nen vorschlag wie ich mir das live ansehen könnte:
Kopier einfach eine Seite (Quelltext) und das CSS, lade die beiden Teile irgendwohin. Dann kann man sich das schon mal ansehen ohne das du TL komplett hochladen musst...
Viele Grüße
Moinsen,
stimmt das geht natürlich, habe dir mal die entsprechenden Ausschnitt kopiert und das Stylesheet eingefügt.
http://project.cbvision.de/testseite.html
Vielen Dank und viele Grüße
Chris
Ich seh da im Moment keinen Fehler.. kannst du eventuell noch eine Seite hochladen wo dann das Problem von dir auftaucht?
Viele Grüße
Moin,
kein Problem, hier findest du eine Testseite... http://frontendmedia.com/ ... einfach auf einen der Unterpunkte klicken, dann verschwinden sie.
Grüße
Chris
Hallo christopher,
das Problem sind deine zusätzlichen Klassen on und off. Wenn der Navigationspunkt nicht mehr direkt angewählt ist, bekommt er die Klasse off. Das kommt dir dann ins gehege...
Versuch doch besser mit den Klassen zu arbeiten die es schon in TL gibt:
- active ist wie on
- trail ist auch wie on, nur das es nicht acive ist, sondern ein Punkt darunter ist on
- keine extra klasse ist wie off
Damit kommst du wesendlich weiter und du hast alle Zustände die du braucht ;-)
Viele Grüße
Moin,
habs eben mal ausprobiert, scheint zu klappen, morgen werd ich mich mal im Detail damit befassen... vielen Dank für deine Mühe!