Gibt es ein möglichkeit die Listennavigation Klappbar zu machen Einstellungen

[feniweb]

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

[smail]

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

[bjoern]

@offtopic
Schöne Beispielseite von Smail. Welche Agentur hat das Design gemacht und das ins CMS umgesetzt?

[smail]

@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

[alexander]

ich habe das mal vom download thread des listenmoduls abgetrennt und ins anwenderforum verschoben.

[toddy]

Ja so wie smail das hat. Wie hast Dudas gemacht ist das ein "normales" Modul...?

[smail]

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

[Dieter]

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

[feniweb]

@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

[andi]

@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

[mistral]

das funktioniert aber nicht im IE, oder?

[smail]

ä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...

[feniweb]

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

[andi]

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

[hylli]

@feniweb
Ich meine hier solltest Du fündig werden - hoffe ich zumindest!

Achja, hallo erstmal an alle!

Hylli

[jwitt]

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_*]

Denkst Du nicht mit einem Link zum Beispiel vll. eher Hilfe bekommst, als das es einer nachbaut ???

[jwitt]

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

[pawel]

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.

[jwitt]

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.

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