Gibt es ein möglichkeit die Listennavigation Klappbar zu machen |
Willkommen, Gast ( Anmelden | Registrierung ) [ Hilfe | Mitglieder | Suche ]
Gibt es ein möglichkeit die Listennavigation Klappbar zu machen |
Fri. 7. July 2006, 13:53
Beitrag
#1
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
Ich weis jetzt nicht recht ob man Fragen zu einem Modul hier stellen soll oder wo anders. Aber egal.
Meine Frage: gibt es ein möglichkeit die Listennavigation Klappbar zu machen? Wenn ja wie? Hat das schon jemand gemacht? Den die Navigation 2 die das zwar kann ist leider auf Tabele aufgebaut und nicht für Barrierefrei geeignet. feniweb -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Fri. 7. July 2006, 14:02
Beitrag
#2
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Meine Frage: gibt es ein möglichkeit die Listennavigation Klappbar zu machen? Was genau meinst Du mit klappbar?! So wie die Navigation links auf dieser Seite? Hast Du evtl. Screenshot oder eine Seite, die das so macht, wie DU meinst? Der Beitrag wurde von smail bearbeitet: Fri. 7. July 2006, 14:02 -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Fri. 7. July 2006, 14:18
Beitrag
#3
|
|
Administrator Gruppe: Members Beiträge: 1.092 Mitglied seit: 16.06.2006 Wohnort: Köln Mitglieds-Nr.: 1 |
@offtopic
Schöne Beispielseite von Smail. Welche Agentur hat das Design gemacht und das ins CMS umgesetzt? -------------------- Es wird, es wird...
|
|
|
Fri. 7. July 2006, 14:29
Beitrag
#4
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
@offtopic Schöne Beispielseite von Smail. Welche Agentur hat das Design gemacht und das ins CMS umgesetzt? Agentur?! Oder anders gesagt: Dann bin ich eben selbst die Agentur! Das Design stammt von mir totally handcrafted Freut mich, wenns gefällt! Viele Grüße Jan -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Fri. 7. July 2006, 14:58
Beitrag
#5
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 853 Mitglied seit: 16.06.2006 Wohnort: Wien / Österreich Mitglieds-Nr.: 2 |
ich habe das mal vom download thread des listenmoduls abgetrennt und ins anwenderforum verschoben.
-------------------- SEFRENGO | a free choice ... again!
|
|
|
Fri. 7. July 2006, 17:03
Beitrag
#6
|
|
Advanced Member Gruppe: Members Beiträge: 72 Mitglied seit: 03.07.2006 Mitglieds-Nr.: 77 |
Ja so wie smail das hat. Wie hast Dudas gemacht ist das ein "normales" Modul...?
-------------------- |
|
|
Fri. 7. July 2006, 17:10
Beitrag
#7
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
Ja so wie smail das hat. Wie hast Dudas gemacht ist das ein "normales" Modul...? ja, ist das ganz normale Listen-Navigationsmodul! QUELLTEXT Erst Ordner, dann Seiten anzeigen: ja Komplette Ordnerstruktur anzeigen: Anzahl darzustellender Ebenen (0: alle): 0 Startseiten anzeigen Ordner nur als aktiv markieren, wenn Startseite angezeigt wird ja Pfad als aktiv verfolgen Ordner ausschließen (idcat kommasepariert angeben): Seiten ausschließen (idcatside kommasepariert angeben): Ausgeschlossene Seiten und Ordner auch im Backend verbergen: ja Einleitung/Ende der Navigation anzeigen, falls Navigation "leer" Startnummer für tabindex: In das Ebenentemplate kommt dann QUELLTEXT <ul>{layer}</ul> Ich denke, der Rest is klar. Fehlt dann halt nur noch ein bisschen css Viele grüße Jan Der Beitrag wurde von smail bearbeitet: Fri. 7. July 2006, 17:12 -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Fri. 7. July 2006, 17:40
Beitrag
#8
|
|
Member Gruppe: Members Beiträge: 20 Mitglied seit: 01.07.2006 Wohnort: Laatzen Mitglieds-Nr.: 50 |
Ja so wie smail das hat. Wie hast Dudas gemacht ist das ein "normales" Modul...? Genau darum geht es im vierten Teil meines Screencasts - der allerdings noch nicht ganz fertig ist, einfach mal in den folgenden Tagen diesen Thread verfolgen. Bis denne, Dieter |
|
|
Fri. 7. July 2006, 20:08
Beitrag
#9
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
@smail: habe deine Einstellungen ausgetestet doch bei mir gibts da nichts das sich offnet.
Aus was besteht den dieses wenige CSS bei dir. So siehs bei mir aus: Hauptnavi: Ordner1 Seite für die weiterleitung zu Unterodnern->Seite1 - Unterordner -- Seite 1 -- Seite 2 -- Seite 3 - Unterordner2 -- Seite 1 -- Seite 2 -- Seite 3 -- Seite 4 Ordner2 usw. Die Seiten sind alle in Unterodnern. feniweb Der Beitrag wurde von feniweb bearbeitet: Fri. 7. July 2006, 21:06 -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Fri. 7. July 2006, 22:23
Beitrag
#10
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
@smail: habe deine Einstellungen ausgetestet doch bei mir gibts da nichts das sich offnet. Aus was besteht den dieses wenige CSS bei dir. So siehs bei mir aus: Hauptnavi: Ordner1 Seite für die weiterleitung zu Unterodnern->Seite1 - Unterordner -- Seite 1 -- Seite 2 -- Seite 3 - Unterordner2 -- Seite 1 -- Seite 2 -- Seite 3 -- Seite 4 Ordner2 usw. Die Seiten sind alle in Unterodnern. feniweb hallo feniweb habe dir rasch das css für das pulldown von smail rauskopiert: QUELLTEXT #MenuBar ul li:hover ul, #MenuBar ul li.over ul {display: block; } #MenuBar ul li ul li a:hover {color: #4874B6; } #MenuBar ul li a:hover, #MenuBar ul li a.act {color: #4874B6; } #MenuBar ul li ul li a {color: #777777; padding-left: 10px; display: inline; } #MenuBar ul li ul li {cursor: pointer; float: none; padding: 0; margin: 0; border-bottom: #CBCBC1 1px solid; } #MenuBar ul li ul {background: #F1F1F1; padding: 0; margin: 0; border-bottom: #2389BC 0px solid; border-left: #2389BC 0px solid; border-right: #2389BC 0px solid; list-style: none; line-height: 1.7em; width: 180px; position: absolute; top: 2.8em; left: 0px; display:none; } #MenuBar ul li a {color: #777777; } #MenuBar ul li {cursor: pointer; float: left; position: relative; margin-right: 0px; } #MenuBar ul {background-color: #FFFFFF; padding: 0 0 0 180px; margin: 0; list-style: none; line-height: 2.8em; position: relative; } #MenuBar a {text-decoration: none; margin: 0; padding-right: 33px; padding-left: 0px; display: block; } #MenuBar {background-color: #FFFFFF; font-size: 10px; font-weight: bold; font-family: verdana, Arial, Tahoma, Helvetica; height: 2.8em; clear: both; width: 100%; background-repeat: repeat-x; background-position: bottom; } daraus kannst du das leicht für dich abändern. mit der angabe «position: absolute» kannst du das menü in die verschiedensten richtungen öffnen lassen. gruss maccaroni -------------------- |
|
|
Sat. 8. July 2006, 09:56
Beitrag
#11
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 343 Mitglied seit: 26.06.2006 Wohnort: CH Mitglieds-Nr.: 5 |
das funktioniert aber nicht im IE, oder?
-------------------- So einfach wie möglich, aber nicht einfacher!
(Albert Einstein) |
|
|
Sat. 8. July 2006, 10:50
Beitrag
#12
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 587 Mitglied seit: 01.07.2006 Mitglieds-Nr.: 62 |
ähm...
bin grad etwas verwirrt. Ich dachte, es ginge um das Menü links - nicht um das Menüleiste oben, oder?? Zumindest habe ich für das Menü links die Modulconfig geposted. Maccaroni hat allerdings dann dass css für die obere Menüleiste gepostet Kommt ihr noch mit?? Gut.... @mistral: stimmt, die Pulldowns in der Menüleiste funktionieren nicht im IE! Schlicht und ergreifend, weil er da css so mangelhaft implementiert hat... Aber javascript wollte ich damals bewusst nicht einsetzen nur um die Kinderkrankheiten des IE zu heilen... FF-User sind eben klar im Vorteil... ps. aber falls jemand doch 'ne einfache Lösung per js hat, wär ich auch nicht böse drum... -------------------- Zufall ist das Pseudonym, das Gott sich zugelegt hat, wenn er unerkannt bleiben möchte.
|
|
|
Sat. 8. July 2006, 11:49
Beitrag
#13
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 627 Mitglied seit: 30.06.2006 Mitglieds-Nr.: 25 |
Hallo
Nun das wird für die nächsten 2 Wochen mein letzter Beitrag sein. Noch zu meiner obigen Frage: Ja, ich meinte die Seitennavi Standart zugeklapp, auf anklick öffnet sich der entsprechende Bereich. Im Dedi hat Ketti eine Spezial Listennavi zur verfühgung gestellt "Listen_Navigation_0.9.6_KnudS_dev.dedimod" da kann man über die ID angeben welche Bereiche eingeklapp sein sollen. Ich brauche jedoch genau das gegenteil. Generell soll alles zugeklappt sein und eben auf anklick offnet sich dieser Bereich. Evtl. ist ketti hier auch am start und kann diese Möglichkeit erweitern. Listennavi: Standart Einstellung 1. Generell alles zugeklappt bei klick öffnet sich der entsprechende Bereich 2. Feld für die ID angabe ausgeklppter Bereiche 3. Box um Einstellungen zu schützen so das trotzdem am Modul Änderungen übernehmen kann Das wären so meine wünsche für ein fast Perfekte Navi-Modul. Wünsch allen eine schöne Zeit. feniweb -------------------- feniweb
_____________________________________________________________________________ Wer kämpft, kann verlieren. Wer nicht kämpft, hat schon verloren. (Bertolt Brecht) |
|
|
Sat. 8. July 2006, 12:02
Beitrag
#14
|
|
purist Gruppe: AdvancedMembers Beiträge: 1.525 Mitglied seit: 30.06.2006 Wohnort: luzern (schweiz) Mitglieds-Nr.: 16 |
ps. aber falls jemand doch 'ne einfache Lösung per js hat, wär ich auch nicht böse drum... ich löse dies so: QUELLTEXT sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); zweite zeile ("nav") die id des umschliessenden divs angeben. dann im css: QUELLTEXT #MenuBar ul li:hover ul, #MenuBar ul li.over ul {display: block; } ergänzen mit: QUELLTEXT #MenuBar ul li:hover ul, #MenuBar ul li.sfhover ul, #MenuBar ul li.over ul {display: block; } gruss maccaroni -------------------- |
|
|
Sat. 8. July 2006, 12:18
Beitrag
#15
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 245 Mitglied seit: 06.07.2006 Mitglieds-Nr.: 117 |
@feniweb
Ich meine hier solltest Du fündig werden - hoffe ich zumindest! Achja, hallo erstmal an alle! Hylli |
|
|
Fri. 26. June 2009, 14:28
Beitrag
#16
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 129 Mitglied seit: 30.06.2006 Wohnort: Hamburg Mitglieds-Nr.: 27 |
Hallo,
ich greife diesen alten Thread noch einmal auf, da ich eine Frage dazu habe. Ich kann aber auch etwas Licht in die hier sehr verworrenen zusammengeworfenen Informationen bringen. Ziel ist eine aufklappende, horizontale Listennavigation, die sowohl im IE (der braucht natürlich wieder eine Extrawurst) als auch im FF funktioniert. Die Seite (www.tedatex.de), aus die sich hier am Anfang bezogen wird, ist leider so nicht mehr online - ich habe mir aber damals einige Informationen darüber auf mein Festplattenarchiv gesichert. Jetzt habe ich solch eine Navigation erstellen müssen und versucht aus den Informationen schlau zu werden, was nicht sehr einfach war. Die Listennavigation (auf "erweitert" eingestellt) muß wie folgt eingestellt werden: QUELLTEXT Anzeigeart: Ordner mit Seiten Erst Ordner, dann Seiten anzeigen: Komplette Ordnerstruktur anzeigen: ja Anzahl darzustellender Ebenen (0: alle): 0 Startseiten anzeigen: ja Ordner nur als aktiv markieren, wenn Startseite angezeigt wird ja Pfad als aktiv verfolgen: ja Ordner ausschließen (idcat kommasepariert angeben): Seiten ausschließen (idcatside kommasepariert angeben): Ausgeschlossene Seiten und Ordner auch im Backend verbergen: ja Einleitung/Ende der Navigation anzeigen, falls Navigation "leer" Startnummer für tabindex: Bei Template: QUELLTEXT Einleitung der Navigation: <div id="MenuBar"> Ende der Navigation: </div> Ebene: <ul id="nav">{layer}</ul> Rest wie vorgegeben. Code der js-Datei sfhover.js: QUELLTEXT sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); Code der für meine Bedürfnisse modifizierten css-Datei pulldownmenu.css : QUELLTEXT #MenuBar { position: relative; left: 575px; top: 100px; font-size: 0.77em; color: #920202; font-weight: bold; height: 2.8em; clear: both; width: 225px; background-repeat: repeat-x; background-position: bottom; } #MenuBar ul li:hover ul, #MenuBar ul li.sfhover ul, #MenuBar ul li.over ul { display: block; } #MenuBar ul li ul li a:hover { color: #656368; } #MenuBar ul li a:hover, #MenuBar ul li a.act { color: #656368; } #MenuBar ul li ul li a { color: #920202; padding-left: 10px; display: inline; } #MenuBar ul li ul li { cursor: pointer; float: none; padding: 0; margin: 0; border-bottom: #CBCBC1 1px solid; } #MenuBar ul li ul { background: #F1F1F1; padding: 0; margin: 0; border-bottom: #2389BC 0px solid; border-left: #2389BC 0px solid; border-right: #2389BC 0px solid; list-style: none; line-height: 1.7em; width: 180px; position: absolute; top: 2.8em; left: 0px; display:none; } #MenuBar ul li a { color: #920202; } #MenuBar ul li { cursor: pointer; float: left; position: relative; margin-right: 0px; } #MenuBar ul { margin: 0; list-style: none; line-height: 2.8em; position: relative; } #MenuBar a { text-decoration: none; margin: 0; padding-right: 15px; padding-left: 0px; display: block; } Damit ist eine aufklappende, horizontale Listennavigation , die im IE (braucht als Extrawurst das JS) und im FF funktioniert erstellbar. Leider ist der daraus resultierende Quellcode nicht valide. Der Fehler ensteht durch die Verwendung von id statt class bei: QUELLTEXT Ebene: <ul id="nav">{layer}</ul> Ich habe es schon mit einem Austausch gegen "class" versucht und dann (ich bin kein Programmierer) entsprechend in der js-Datei von QUELLTEXT document.getElementById("nav") nach QUELLTEXT document.getElementByClass("nav") bzw. QUELLTEXT document.getElementsByClass("nav") versucht - aber ohne das gewünschte Ergebnis.Kann mir jemand zeigen, wie ich das Ganze valide bekomme? Gruß Jürgen Der Beitrag wurde von jwitt bearbeitet: Fri. 26. June 2009, 15:07 |
|
|
Guest_bkm_* |
Sat. 27. June 2009, 15:32
Beitrag
#17
|
Guests |
Denkst Du nicht mit einem Link zum Beispiel vll. eher Hilfe bekommst, als das es einer nachbaut ???
|
|
|
Sat. 27. June 2009, 17:01
Beitrag
#18
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 129 Mitglied seit: 30.06.2006 Wohnort: Hamburg Mitglieds-Nr.: 27 |
Hallo bkm,
Denkst Du nicht mit einem Link zum Beispiel vll. eher Hilfe bekommst, als das es einer nachbaut ??? Da hast Du natürlich Recht, aber ich habe Sefrengo leider nur lokal Laufen :-) Mein Root-Server hat leider nicht die Voraussetzungen, um Sefrengo dort laufen zu lassen :-) Ich dachte jemand, der sich mit JS auskennt, könnte auch so eine Aussage dazu machen. Gruß Jürgen |
|
|
Sat. 27. June 2009, 19:33
Beitrag
#19
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 442 Mitglied seit: 02.07.2006 Wohnort: Halle Mitglieds-Nr.: 71 |
Zunächst müßtest Du auch eine korrekte Methode verwenden.
Viel leichter ist es aber wenn Du auf ein Framework ausweichst (z.B. jquery) und dir den Arkordioneffekt selbst erstellst. Kannst dich ja mal von unserer FAQ-Seite inspirieren lassen. Ist zwar kein Menü, aber das Prinzip ist das gleiche. -------------------- |
|
|
Sat. 27. June 2009, 20:18
Beitrag
#20
|
|
Advanced Member Gruppe: AdvancedMembers Beiträge: 129 Mitglied seit: 30.06.2006 Wohnort: Hamburg Mitglieds-Nr.: 27 |
Hallo pawel,
Zunächst müßtest Du auch eine korrekte Methode verwenden. ... das übersteigt leider meine Möglichkeiten. Ich habe zwar mutig einfach einmal das document.getElementById("nav") durch document.getElementsByClassName("nav") ersetzt, aber auch dann meckert der IE, daß die Methode nicht anwendbar ist oder so etwas Ähnliches. ZITAT Viel leichter ist es aber wenn Du auf ein Framework ausweichst (z.B. jquery) und dir den Arkordioneffekt selbst erstellst. Kannst dich ja mal von unserer FAQ-Seite inspirieren lassen. Ist zwar kein Menü, aber das Prinzip ist das gleiche. viel leichter :-) Ich bin, wie gesagt, kein Programmierer und auch das übersteigt meine Möglichkeiten. Trotzdem Danke für Deine Antwort. Gruß Jürgen |
|
|
Vereinfachte Darstellung | Aktuelles Datum: 23.4.24 - 21:52 |