Seitennavigation mit Ordnernamen als Überschrift wie?, 4 Navibäume nebeneinander mit Ordnernamen und Seiten |
Willkommen, Gast ( Anmelden | Registrierung ) [ Hilfe | Mitglieder | Suche ]
Seitennavigation mit Ordnernamen als Überschrift wie?, 4 Navibäume nebeneinander mit Ordnernamen und Seiten |
Mon. 23. July 2007, 15:20
Beitrag
#1
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
Hallo SF Team
Habe da wieder einmal eine Frage zu einer Navigation Ich möchte 4 Navigationen neben einander platzieren, mit der Ausgabe von Ordnernamen und Seiten, alle Navigationspunkte sollten sichtbar sein. Mit der Listennavie 1.1 kann man aber den Ordnernamen des aktuellen Baumes nicht anzeigen gibt es da eine Möglichkeit ? Hat jemand schon mal so etas gelöst und wenn ja wie? Das ganze sollte in etwa so aussehen: Ordner1 | Ordner 2 | Ordner 3 | Ordner 4 | - 1. Seite | - 1. Seite | - 1. Seite | - 1. Seite | - 2. Seite | - 2. Seite | - 2. Seite | - 2. Seite | - 3. Seite | - 3. Seite | - 3. Seite | - 3. Seite | - 4. Seite | - 4. Seite | - 4. Seite | - 4. Seite | - 5. Seite | - 5. Seite | - 5. Seite | - 5. Seite | Im Backend habe ich es so: Im Hauptnavigationordner liegen folgende Ordner: - Ordner 1 -- 1. Seite -- 2. Seite -- 3. Seite -- 4. Seite -- 5. Seite - Ordner 1 -- 1. Seite -- 2. Seite -- 3. Seite -- 4. Seite -- 5. Seite - Ordner 1 -- 1. Seite -- 2. Seite -- 3. Seite -- 4. Seite -- 5. Seite - Ordner 1 -- 1. Seite -- 2. Seite -- 3. Seite -- 4. Seite -- 5. Seite Modulkonfiguration für jeden Ordner eine eigene.: - Startordner: jeweis der Ordner mit den Seiten - Anzeigeart: Ordner mit Seiten - Erst Ordner, dann Seiten anzeigen: ja - Komplette Ordnerstruktur anzeigen: - Startseiten anzeigen: ja - Ordner nur als aktiv markieren, wenn Startseite angezeigt wird: ja - Pfad als aktiv verfolgen: ja - Ebenen und Seiten: normale "ul/li" Tags -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Mon. 23. July 2007, 15:49
Beitrag
#2
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Eigentlich brauchst Du dafür nur eine Listnavi-Modul:
Ist das die komplette Struktur der Seite (d.h. im root liegen diese 4 Ordner)? Dann sollte Folgendes gehen: Startordner: root Komplette Ordnerstruktur anzeigen: ja Liegen diese Ordner nicht im root, könntest Du zusätzlich Folgendes machen: Angezeigter Startebene von Ordnern manipulieren: Da trägst Du die Ebenentiefe ein, auf der die o.g. Struktur vorkommt. Außerdem: Ordner ausschließen: alle Ordner, die noch auf dieser Ebene liegen, in dem die o.g. Struktur vorkommt. Der Rest so, wie in deiner Config. Habs nicht komplett getestet, sollte aber hinhauen. Das betrifft jedoch nur die Ausgabe von sf - Formatierung dann entstsprechend per css. Gruß Jan -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Mon. 23. July 2007, 16:50
Beitrag
#3
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
@smail
Danke für dein schnelles antworten habe das nun mit kopierten Modulen gelöst und ausgeschlossenen Ordnern und Seiten. Denn jeder Navigationsbaum sollte noch ein eigenes HG-Bild erhalten und das ist denke ich nur so zu lösen. Gruss -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Mon. 23. July 2007, 17:45
Beitrag
#4
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
ZITAT Denn jeder Navigationsbaum sollte noch ein eigenes HG-Bild erhalten und das ist denke ich nur so zu lösen. Hm, ich denke nicht. Ich gehe mal davon aus, dass jeder Navigationsbaum ohnehin eine feste Breite zugewiesen bekommt, beispielsweise alle 100px. Dann könntest Du ein Hintergrundbild mit 400px beim ul-Element (oder einem umschließenden Div) setzen, was entsprechend gestaltet ist und die 4 Spalten quasi simuliert. Ggf. per css mit repeat-y runterziehen. Vorteile:
-------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Mon. 23. July 2007, 19:13
Beitrag
#5
|
|
Advanced Member Gruppe: Moderators Beiträge: 911 Mitglied seit: 26.06.2006 Wohnort: Essen; Ruhrgebiet Mitglieds-Nr.: 4 |
Da ja für jeden Ordner ein <ul> angefangen wird kannst du doch auch per CSS jedem diese ul ein eigenes Hintergrundbild geben!
-------------------- |
|
|
Mon. 23. July 2007, 20:07
Beitrag
#6
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Auch wieder war Ist nur die Frage, wie man diese adressiert, denn
QUELLTEXT ul li ul { background: url(...); } fügt ja bei jedem das gleiche Bild ein. Man müsste die verschiedenen ul's also per ID bzw. class unterscheidbar machen. Und das geht mit der Listennavi z.B. durch die Templatevariable {id}, wodurch dann die ID der Seite ausgegeben wird. Lässt sich übrigens auch prima für Bildnavigationen verwenden. -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Tue. 24. July 2007, 16:50
Beitrag
#7
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
@smail
Habe deine Idee aufgegriffen und versucht umzusetzen. Ich habe da aber folgendes Problem Wenn ich in der Listennavigation in der Konfiguration: Ebene: QUELLTEXT <ul id="navmenu"> {layer}</ul> eingeb, wird das auch für die Verschachtelten <ul > eingesetzt und das führt natürlich dazu das die ganze navi zerfällt. Backend-Navi sieht wie oben beschrieben aus und das CSS liegt unten bei. Im Moment sieht die Navi so aus, mit den beschriebenen Einstellungen. Zuschneiden_43.jpg ( 29.42KB ) Anzahl der Downloads: 46 so sollte sie eigentlich aussehen. Zuschneiden_44.jpg ( 24.18KB ) Anzahl der Downloads: 40 Wer kann mir da weiterhelfen? Gruss QUELLTEXT /* Grundeinstellungen */ ul#navmenu { width: 420px; height:140px; padding:5px 0 0 5px; list-style: none; background-image: url(../../media/bilder-layout/navi-hg.png); background-repeat: no-repeat; background-position: 0px 0px; } ul#navmenu a { border: 0 none; padding: 0px 6px 4px 0px; display: block; color: #454518; text-decoration: none; height: auto !important; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; /*Schriftgrösse für ganzes Menü proportional anpassen*/ font-style: normal; font-weight: normal; font-variant: normal; } ul#navmenu li { border: 0 none; float: left; display: inline; list-style: none; position: relative; height: 24px; white-space :nowrap; width: 105px; } /*-- Einstellungen für Seitenmenü --*/ ul#navmenu ul { list-style: none; display: block; position: absolute; top: 25px; /*Abstand des ersten Menüeintrages zum oberen Rand*/ left: 0; width: 105px; font-size: 90%; /* Schriftgrässe für einzelne Seitenmenüs*/ } ul#navmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: inherit; } ul#navmenu ul li { text-align:left; width: 100%; height: 100%; float: left; display: block !important; display: inline; } ul#navmenu li:hover li a{ padding: 0px 6px 4px 0px; float: none; color: #454518; } ul#navmenu li:hover li a:hover { color: #990000; background-color: #FFFFFF; } ul#navmenu li:hover ul { display: block; } QUELLTEXT <!--START 11//-->
<ul id="navmenu"> <li><a href="index.php?idcat=2&sid=0b4aa5f6fde2019360274498c7dd025b">feel balanced</a> <ul id="navmenu"> <li><a href="index.php?idcatside=10&sid=0b4aa5f6fde2019360274498c7dd025b">feelbalanced</a></li><li><a href="index.php?idcatside=4&sid=0b4aa5f6fde2019360274498c7dd025b">Kontakt</a></li><li><a href="index.php?idcatside=7&sid=0b4aa5f6fde2019360274498c7dd025b">über mich</a></li><li><a href="index.php?idcatside=9&sid=0b4aa5f6fde2019360274498c7dd025b">Anfahrt</a></li></ul></li><li><a href="index.php?idcat=7&sid=0b4aa5f6fde2019360274498c7dd025b">Angebot</a> <ul id="navmenu"> <li><a href="index.php?idcatside=11&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-1</a></li><li><a href="index.php?idcatside=2&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-2</a></li><li><a href="index.php?idcatside=3&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-3</a></li><li><a href="index.php?idcatside=12&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-4</a></li><li><a href="index.php?idcatside=13&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-5</a></li><li><a href="index.php?idcatside=14&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-6</a></li><li><a href="index.php?idcatside=15&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-7</a></li></ul></li><li><a href="index.php?idcat=6&sid=0b4aa5f6fde2019360274498c7dd025b">Aktuelles</a> <ul id="navmenu"> <li><a href="index.php?idcatside=6&sid=0b4aa5f6fde2019360274498c7dd025b">Foto Shooting</a></li><li><a href="index.php?idcatside=5&sid=0b4aa5f6fde2019360274498c7dd025b">Galerie</a></li></ul></li><li><a href="index.php?idcat=8&sid=0b4aa5f6fde2019360274498c7dd025b">Links</a> <ul id="navmenu"> <li><a href="index.php?idcatside=16&sid=0b4aa5f6fde2019360274498c7dd025b">Links</a></li> </ul></li> </ul><!--END 11//--> -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Tue. 24. July 2007, 18:22
Beitrag
#8
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
nabend
also, id geht schon mal gar nicht. eine id muss einzigartig sein und darf pro dokument nur 1x vorkommen. du hast drei möglichkeiten: 1. die modifizierte seitennavigation von stam verwenden. damit kannst du per {first} nur der ersten liste eine id mitgeben und dort das hintergrundbild notieren. 2. statt id eine klasse verwenden, dann der «ul.navmenu» das hintergrundbild mitgeben und «ul.navmenu ul» mit background: none ergänzen. 3. ein div um das ganze mit dem bild als hintergrund update: drücke mich gerade von einer anderen arbeit. ergebnis wie siehe hier :-). gruss andi -------------------- |
|
|
Tue. 24. July 2007, 21:15
Beitrag
#9
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 541 Mitglied seit: 27.06.2006 Mitglieds-Nr.: 8 |
Nur mal ne Frage,
ist die gewünschte Navigation so wie diese (bis auf das mit den Bildern). Der Ordneraufbau entspricht jedenfalls den gewünschten und die Listennave nutze ich da auch. Gruß |
|
|
Wed. 25. July 2007, 01:52
Beitrag
#10
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Die Version von andi sieht doch schon ganz passend aus Ich weiß jetzt nicht, ob die mit der modifizierten Listennavi gemacht ist, es sollte aber auch mit der normalen gehen.
ZITAT also, id geht schon mal gar nicht. eine id muss einzigartig sein und darf pro dokument nur 1x vorkommen Das ist schon klar, vielleicht hab ich mich nicht eindeutig ausgedrückt. Man kann {id} dazu verwenden, eindeutige Klassen zu generieren (die äquivalent zu andis "ul#navmenu" funktionieren): QUELLTEXT <ul class="navmenu_{id}> {layer} </ul> bzw. <li class="item_{id}></li> Damit ist jedes <ul> bzw. <li> per css eindeutig adressierbar. Ich würd dann andis Vorschlag einfach so erweiteren, dass ul.navmenu ein Hintergrundbild für die komplette Navi erhält. Ist meiner Meinung nach die einfachste Lösung. -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Wed. 25. July 2007, 04:53
Beitrag
#11
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
Das ist schon klar, vielleicht hab ich mich nicht eindeutig ausgedrückt. Man kann {id} dazu verwenden, eindeutige Klassen zu generieren (die äquivalent zu andis "ul#navmenu" funktionieren) doch, du hast dich schon richtig ausgedrückt. ich habe mich auf den von feniweb veröffentlichten code von oben bezogen. gruss andi -------------------- |
|
|
Wed. 25. July 2007, 11:03
Beitrag
#12
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
Ich möchte allen die hier jeweils Hilfe leisten und Tipps geben einmal recht herzlich danken sagen.
@Stam Ja ich habe deine Navi als Grundlage benutzt, ich hoffe das ist OK für dich. Und dank deinen Ergänzungen in der Listen-Navigation 1.01.02 ist mein Navigation erst möglich geworden. @smail Es geht eigentlich nur um das <ul> Tag wenn ich hier <ul id="navmenu"> einsetzte wird das auf alle übertragen auch bei verschachtelnden <li> Mit der Listen-Navigation 1.01.02 von Stam ist das nun kein Problem mehr Ich habe das nun so gelöst QUELLTEXT <ul{first} id="navmenu" {/first}> und schon wird die id="navmenu" nur auf die erste <ul> angewendet. GENIAL.{layer}</ul> @andi Danke für deine kurze CSS Navi-Lösung. Muss evtl. das eine oder andere nochmals nachfragen bis ich meine Kunden-Wuschnavi habe. Möchte aber nochmals nachfragen {id} gibt die nur die Nummer des Ordner oder der Seite zurück oder eine fortlaufende Nummer? Super währe wenn man von diesen {Templatevariablen} evtl. im WIKI Anwendungsmuster hätte. Nochmals an alle Dank. Gruss -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Wed. 25. July 2007, 11:13
Beitrag
#13
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
Hier noch ein Muster wie die Navi im Moment aussieht.
Zuschneiden_45.jpg ( 22.47KB ) Anzahl der Downloads: 36 Habe nur noch ein Problem bei der aktiven Seite habe ich einen weissen Balken hinterlegt, dieser verschiebt es um den Abstan vom Rand und einen Punkt jewails am ende der Navi? Ich hoffe ich bekomme das auch noch in den Griff. Gruss -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Wed. 25. July 2007, 11:19
Beitrag
#14
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
mh, hast du den aussenabstand dem li element gegeben? falls ja, gib sie dem linkelement innerhalb des li elementes.
falls nein, poste deinen code :-) gruss andi -------------------- |
|
|
Wed. 25. July 2007, 11:22
Beitrag
#15
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
ZITAT Möchte aber nochmals nachfragen {id} gibt die nur die Nummer des Ordner oder der Seite zurück oder eine fortlaufende Nummer? Ja, ist die ID von Ordner/Seite und keine fortlaufende Nummer. Nur der vorsorgliche Hinweis: Diese ID ist nicht immer eindeutig. Angenommen wir haben einen Ordner mit ID 1 und darin die Seiten IDs 1-5. Dann kommt die ID natürlich bei der Ausgabe 2mal vor, einmal für die Seite und einmal für den Ordner. Daher würde ich hier nie das xhtml-Attribut ID verwenden, sondern immer eine Klasse. Aber da Seiten bzw. Ordner (normalerweise) unterschiedlich ausgegeben werden, kannst Du das später im css unterscheiden, beispielweise: QUELLTEXT ul.navmenu_1 li.navmenu_1 Gruß Jan -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Wed. 25. July 2007, 11:27
Beitrag
#16
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
die problematik kannst du doch einfach umgehen, indem du das template für ordner und seiten unterschiedlich gestaltest:
order: QUELLTEXT <li><a href="{link}" id="ordner_{id}">{name}</a>{folder}</li> seite: QUELLTEXT <li><a href="{link}" id="seite_{id}>{name}</a></li> oder verstehe ich was nicht? -------------------- |
|
|
Wed. 25. July 2007, 11:32
Beitrag
#17
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Hm, ich erinnere mich grad dunkel daran, dass gerade der IE bei so einem Menü mal wieder eine Sonderbehandlung verlangt. Weiß allerdings nicht mehr, ob das auch für festgelegte Spaltenbreiten gilt.
Weitere Infos zu diesem Menütyp und wie man die IE-Bugs dabei in den Griff bekommt, findent man im yaml-Framework. @andi: Hast Recht Manchmal kommt man nicht auf die einfachsten Lösungen...tsss -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Wed. 25. July 2007, 14:14
Beitrag
#18
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
Habe's fast geschafft, die Naiv funktioniert soweit wie gewünscht nur im IE6 wird der weisse Balken nur bei der Schrift hinterlegt und nicht über die ganze Breite, weiss evtl. auch hierzu jemand Rat evtl. einen Hack.
Gruss Hier der CSS-Code QUELLTEXT /* CSS Document */
* { margin: 0; padding: 0; border: none; } body { background-color: #eff8e7; color: #000; } ul#navmenu { float: left; width: 26.4em; list-style: none; background-image: url(../../media/bilder-layout/navi-hg.png); background-repeat: no-repeat; height: 8.7em; font-family: Verdana, Arial, Helvetica, sans-serif; } ul#navmenu a { border: 0 none; padding: 1px 0px 0px 0px; float: none !important; /*für Opera*/ float: left; /*für IE*/ display: block; color: #454518; text-decoration: none; height: auto !important; height: 1%; /*für IE*/ font-size: 90%; /*schriftgrösse für ganzes Menü proporzial anpassen*/ font-style: normal; font-weight: normal; font-variant: normal; } ul#navmenu li { float: left; width: 105px;/* 7.45em;*/ } ul#navmenu ul { margin-top: 0.5em; list-style: none; font-size: 80%; padding-left: 0px; } ul#navmenu li a { list-style-type: none; display: block; text-decoration: none; color: #464600; background-image: url(../../media/bilder-layout/arrow-right.gif); background-repeat: no-repeat; background-position: 2px 50%; padding: 2px 0px 0px 10px; } ul#navmenu li a.navactive { list-style-type: none; display: block; text-decoration: none; padding: 2px 0px 0px 10px; background-color: #FFFFFF; color: #990000; background-image: url(../../media/bilder-layout/arrow-right.gif); background-repeat: no-repeat; background-position: 2px 50%; padding: 2px 0px 0px 10px; } ul#navmenu li a:hover { color: #990000; background-color: #FFFFFF; display: block; } ul#navmenu .ordner { float: left; width: 105px;/* 7.45em;*/ font-size: 90%; text-align: center; padding-bottom: 5px; } ul#navmenu .ordneraktive { float: left; width: 105px;/* 7.45em;*/ font-size: 90%; text-align: center; font-weight: bold; padding-bottom: 5px; } -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Wed. 25. July 2007, 14:29
Beitrag
#19
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
versuchs mal mit height: 1% bei ul#navmenu li a nur dür ie, also
QUELLTEXT * html ul#navmenu li a {height:1%} oder in einem separaten stylesheet. -------------------- |
|
|
Sat. 11. August 2007, 15:41
Beitrag
#20
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 116 Mitglied seit: 30.11.2006 Wohnort: CH - Bern Mitglieds-Nr.: 431 |
Habe's fast geschafft, die Naiv funktioniert soweit wie gewünscht nur im IE6 wird der weisse Balken nur bei der Schrift hinterlegt und nicht über die ganze Breite, weiss evtl. auch hierzu jemand Rat evtl. einen Hack. hallo feniweb, kurze frage: funktionierts bei dir nun? hab etliche probleme das gleiche darzustellen! hättest du eventuell die modul config und das fertige css dazu? wäre nett! cheers *s* |
|
|
Vereinfachte Darstellung | Aktuelles Datum: 29.3.24 - 14:05 |